Baştan Sona Flutter Projesi: Ezan Vakti (Part 1)
Merhabaa! 👋🏻
Yepyeni bir seri ile karşınızdayız. Bu serimizde, GitHub hesabımızda bulunan “Ezan Vakti” isimli projeyi adım adım nasıl geliştirdiğimizi anlatacağım.
Uygulama Hakkında Bilgi 📲🕌
Uygulamamız,
- kullanıcı tarafından seçilen il ve ilçenin namaz vakitleri göstermektedir,
- namaz vakitlerinden önce bildirim göndermektedir
- ve ayrıca kullanıcı dilerse tema seçimi ve dil seçimi yapabilmektedir.
Sıkı tutunun başlıyoruz!
Tasarım ve Kodlama Ortamı✒️💻
- UI/UX Tasarım Aracı Kurulumu ✒️
Uygulama tasarımını gerçekleştirmek için bir uygulamaya ihtiyacımız var. Bizim birkaç önerimiz var : Adobe XD ve Figma Biz tasarımımızı Adobe XD üzerinde yapacağız.
- Kod Editör Kurulumu 💻
Uygulamayı kodlamak için, Flutter’ın desteklendiği kod editörlerinden birini kullanmamız gerekmektedir. Biz uygulamayı kodlarken VS Code isimli editörü kullanacağız. Siz de bize eşlik etmek istiyorsanız ve bilgisayarınızda VS Code yüklü değilse buraya tıklayarak indirebilirsiniz.
- Flutter Kurulumu 💙
Samimi olmak gerekirse, bu kurulumu en iyi Flutter’ın sitesindeki yönlendirmeler ile yapabilirsiniz. Henüz dil destekleri arasında Türkçe bulunmuyor. Fakat üzülmeyin takıldığınız yer olursa Flutter Türkiye Telegram üzerinden yardım alabilirsiniz.
Uygulama Tasarımı✒️👨🏻🎨
Uygulamayı tasarlamadan önce, kağıtta hızlı ve basit bir mockup hazırladım. Artık az çok neler gerektiğini biliyoruz.
Tasarımımızı Material Design prensiplerine göre yapıyoruz.
Material Design nedir?
Materyal Tasarım, tasarımla ilgili en iyi pratikleri, genel olarak benimsenmiş kuralları ve herhangi bir cihazda evinizdeymiş gibi rahat hissetmenizi sağlayacak etkileyici uygulamalar oluşturmanıza yardımcı olacak görsel öğeleri içerir. [Materyal Tasarım, Google Developers]
Şimdi Adobe XD’de tasarlamaya başlayabiliriz. (Renk paleti ve logo seçimi daha önceden yapılmıştır.)
- Başlatma Ekranı (Splash Screen) ⏰
Splash screen, bir uygulama arka planda açılırken kullanıcıya boş bir ekran göstermek yerine hazırlanan tasarımını kullanarak ana sayfaya geçiş yapmamızı sağlayan ekrandır. Dikkat etmemiz gereken nokta ise, başlatma ekranında uzun bir yükleme süresi kullanıcıların duygularına negatif bir etki yansıtabilir. Bu durum kullanıcı deneyimi ile doğru orantılıdır. Materyal Tasarım’da verilen tavsiyelere bakıldığında ise marka logosu veya uygulamayı temsil eden bir görsel eklemek en doğru seçimdir.
Böylelikle seçimimiz bu şekilde olacaktır:
- Bilgilendirme Ekranı (Onboarding Screen)
Bu kısımda aklımıza birkaç soru işareti gelebilir. Bu ekran nedir? Bu ekrana neden ihtiyacımız var?
Bu ekran, uygulama kullanıcısıyla ilk temas ettiği noktadır. Kullanıcıya “Hoş Geldiniz” demek için bir fırsat da diyebiliriz 🎉. Bu nedenle uygulama üzerinde harika bir izlenim bırakmak için gereklidir ve oldukça basit hale getirmek önemli bir yere sahiptir. Bu ekran ile birlikte kullanıcıya, uygulamanın işlevleri hakkında bilgiler verebilirsiniz.
Bu ekranı, uygulamayı ilk kez kullanan kullanıcılarda göstermelisiniz. Geri dönen kullanıcılara göstermemelisiniz. Yani uygulama kapandıktan sonra geri açılınca hemen ana sayfaya yönlendirilmelidir.
Bilgilendirme ekranı hakkında detaylı bilgi için buraya tıklayın.
Şimdi sıra bu ekranı tasarlamakta. Peki kullanıcıya ne tür bilgiler verebiliriz? Kullanıcı uygulamayı açtıktan sonra konum bilgilerini manuel bir şekilde girmesi gerekmektedir. Bu durumdan bahsedebiliriz. Diğer bir husus ise kullanıcıyı namaz saatlerinden bildirim alacağını haberdar edebiliriz.
- Ana Sayfa (Home Screen)
Ana sayfa, bir uygulamanın en önemli bir parçasıdır. Çünkü kullanıcıların en fazla vakit geçirdiği sayfadır. Genellikle ana sayfada, kullanıcı diğer sayfalara yapacağı yolculukların başlangıç noktası olduğundan gezinme bileşenleri (components) içerir. Materyal tasarımda bu bileşenin ismi Bottom Navigation Bar olarak adlandırılmaktır.
Daha öncesinde çizdiğimiz mockup’ta neler olacağını belirtmiştik. Materyal tasarım prensiplerine göre tasarladığımız zaman ortaya bu şekilde bir sonuç çıkmaktadır:
App Bar geçerli ekranla ilgili bilgileri ve eylemleri görüntüler.
App Bar bileşenimizde bilgi olarak, uygulamanın ismini ve logosunu ekleyebiliriz. Materyal tasarım prensiplerine göre tasarladığımız zaman ortaya bu şekilde bir sonuç çıkmaktadır:
Uygulamanın Body içerisinde sırasıyla bilgiler bulunduracağız. Bu bilgiler, bulunduğu günün tarihi miladi ve hicri takvime göre olabilir. Ramazan ayında bulunduğumuz için iftara kalan süreyi gösterebilir. En önemlisi ise kullanıcının seçimini yaptığı şehire göre namaz vakitlerinin bulunduğu bir alan olabilir. Bu bilgileri ayrı ayrı kutucuklar halinde hazırladığımız zaman ortaya bu şekilde bir sonuç çıkmaktadır:
En altta bulunan gezinme bileşenimiz (Bottom Navigation Bar) içerisinde bulunan eylem butonlarının işlevlerini tasarlarken, farklı bir sayfaya yönlendirme ihtiyacımız olmadığını ve aynı sayfada daha verimli olacağını düşünüyorum. Burda kullanılabilecek en doğru bileşen (component) “Dialog” olduğuna hepimizin hemfikir olduğumuzu düşünüyorum. Çünkü bu bileşen kullanıcı deneyimi açısından bakıldığında, kullanıcının dikkatini odaklamaktadır. Böylelikle seçimimiz bu şekilde olacaktır:
Veee böylelikle tasarımımızı tamamlamış olduk. Şimdi kodlamaya başlayabiliriz.
Uygulama Kodlama💻💙
Tasarımımız hazır olduğuna göre kodlamaya başlayabiliriz.
Uygulamanın kodlandığı Flutter sürümü “Flutter: 1.18.0–11.1pre” ve kanalı “beta”dır.
Beta kanalına, “Terminal”den
flutter channel betakomutunu yazarak geçeebilirsiniz.flutter upgradekomutunu girmeyi unutmayın. [Upgrading Flutter]
- Projeyi Oluşturalım🆕
Eğer Flutter kurulumunu gerçekleştirdiyseniz, bu aşamada hızlı ve basit bir şekilde proje oluşturabilirsiniz. Proje oluşturmayı bilmiyorsanız buraya tıklayarak öğrenebilirsiniz.
Projeyi oluşturmak istediğimiz klasörü açtık ve Shift+Mouse Sağ Tık yaptıktan sonra Terminali açıyoruz. flutter create prayertimes komutunu giriyoruz. Projemiz oluşturuluyor. Ardından cd prayertimes komutu ile klasör içine giriyoruz ve code . komutu ile Visual Studio Code kod editöründe projeyi açıyoruz.
- Klasör Hiyerarşisini Düzenleyelim 📁
Bir önceki Flutter: Clean Code yazımda daha detaylı bahsetmiştim. Bu projemizde şimdilik bu klasörleri oluşturmamız yeterlidir.
- Arayüzdeki Ögeleri Ekleyelim🖌️📝
Tasarımda kullandığımız renkleri, yazıları, ikonları ve kütüphaneleri ekliyoruz.
- Logoyu Ekleyelim 🕌
Projemizde logonun temaya uygun renk seçilebilmesi ve boyutunun istenildiği şekilde düzenlebilmesi için svg olarak kaydetmiştik. Logomuzu custom widget hale getirerek bu özellikleri verebiliriz. Projemizde bulunan lib > ui > widgets klasörüne appLogo.dart dosyasını oluşturalım.
- Temayı Düzenleyelim🎨
Koyu ve açık mod temalarımızı oluşturmak için öncelikle yandaki görselde görüldüğü gibi lib > UI > Theme klasörümüze dosyalarımızı oluşturuyoruz.
Örnek olarak koyu mod temamızı oluşturmayı göstereceğim. Açık moddan tek farkı renkler olacaktır.
final themeDarkData = ThemeData(); isimli bir ThemeData değişkeni oluşturuyoruz. Ardından property olarak brightness: Brightness.dark ekliyoruz. Açık mod olsaydı Brightness.light olarak eklememiz yeterli olacaktır. Yazılar için tema eklerken, tasarımda kullandığımız Google Open Sans fontunu kullanabilmemiz için google_fonts paketini kurmamız gerekiyor ve geriye sadece renkleri ve yazı temalarını eklemek kalıyor.
Projemizdeki
pubspec.yamldosyası içerisindendependencies:alanınagoogle_fonts: ^1.1.0eklememiz gerekmektedir. (Sürüm değişkenlik gösterebilir.)
Oluşturduğumuz temaları uygulamamıza şimdilik sadece tanımlıyoruz. Projemizdeki main.dart dosyası içerisindeki MaterialApp widget’ımızın theme ve darkTheme property’lerine ekliyoruz.
- Splash Ekranı Düzenleyelim⏰
Splash ekranın amacından daha önce bahsetmiştik. Bu ekranı native bir şekilde düzenlemek için Android ve iOS tarafına da ayrı ayrı müdahale etmemiz gerekiyor.
Android için:
Projemizde bulunan android > app > src > main > res > values klasörüne colors.xml dosyasını oluşturalım. Ardından aşağıda bulunan kodu yapıştıralım. (Dilerseniz hex kodu ile yazılı olan rengi değiştirebilirsiniz.)
Adım 2) Projemizde bulunan android > app > src > main > res > drawable > launch_background.xml dosyasını açalım.
Dosyayı açtıktan sonra <layer-list> içerisinde bulunan <item android:drawable="@android:color/white" /> satırı <item android:drawable=”@color/splash_color” /> ile değiştirelim. Bunu yapma amacımız, uygulama açılırken gösterilen beyaz sayfa yerine, dilediğimiz rengi gösterebilmemizdir.
Dilersek görselde ekleyebiliriz. Görsel eklemek istemiyorsanız, adım 4'e geçiniz.
Adım 3) Projemizde bulunan android > app > src > main > res > drawable klasörüne logo.png dosyamızı ekleyelim. Ardından launch_background.xml dosyamızı açalım. Adım 2'de eklediğimiz <item> elementinin altına, aşağıda bulunan kodu ekleyelim. (Dikkat! drawable/logo yazma sebebimiz dosyanın isminin logo olmasından dolayıdır.)
Vee böylelikle Android native splash ekranımızı oluşturmuş olduk.
iOS için şimdilik bu kısmı ne yazık ki gösteremiyorum. Maddi durumlardan dolayı henüz kendime Mac cihaz satın alamadım.
- Onboarding Ekranı Hazırlayalım
Adım 1) Projemizde bulunan lib > screens klasörüne, kodu yazacağımız onboarding_page.dart isimli dosyayı oluşturalım.
Adım 2) StatefulWidget oluşturalım.
Adım 3) main.dart dosyamıza geri dönelim ve şimdilik Onboarding Page dosyamıza yönlendirelim.
Adım 4) onboarding_page.dart dosyamıza geri dönelim. Tasarımda bulunan arkaplan gölgelendirmesini oluşturalım. Sayfanın tamamını kaplayacağından dolayı Container içerisindeheight ve width özelliklerinedouble.infinity değerini verelim. Ardından decoration özelliği içerisine gradient ekleyelim. Bu gölgelendirme dairesel olmasından dolayı bizim için RadialGradient en verimli sonucu verecektir. Değerlerimizi girdikten sonra sonuç bu şekilde olacaktır.
Adım 5) Tasarımımıza baktığımız zaman sırasıyla container, indicator ve buton görmekteyiz. Düşündüğümüz zaman bunları Columnwidget içerisine alarak sıralayabiliriz. Öncelikle bilgilendirme kutumuzu oluşturalım. Container içerisinde PageView ekleyelim. Bunu eklememizde en önemli faktör hem parmaklarımız ile kutucukları kaydırabilmemiz hem de aynı boyutta bir yapı oluşturmamıza olanak sağlamasıdır. PageView içerisinde özellik olarak physics: ClampingScrollPhysics() eklemeliyiz. Bu aynı zamanda belirlediğimiz sınırın dışına çıkmasını engellemektedir. PageView içerisine controller veonPageChanged özelliklerini de ekledikten sonra kutu içerisinde gerekli olan bilgilerimizi tutacağımız model sınıfımızı oluşturabiliriz.
PageController ve anlık sayfayı gösterecek olan değişkeni eklemeyi unutmayın.
Adım 6) Projemizde bulunan lib > models klasörüne, model sınıfımızı yazacağımız onboarding_model.dart isimli dosyayı oluşturalım.
Adım 7) Tasarımımızdan gördüğümüz kadarıyla bilgilendirme kutucuklarımız; başlık, açıklama ve ikon barındırmaktadır ve geriye kalan her şey aynı olduğu için bu bilgilerden sınıf oluşturmamız yeterli olacaktır.
Adım 8) Bilgilerimizin bulunduğu nesneleri tutacağımız listemizi oluşturalım.
Adım 9) Oluşturduğumuz modeli sayfa içerisine implemente ediyoruz.
Adım 10) Tasarımda bulunan componentlere baktığımızda öncelikli olarak iki adet ana componentimiz var. Kırmızı renk ile işaretli olan componente baktığımızda Container içerisinde PageView ve onun içerisinde Column ardından Custom Widget , Text ve Text görmekteyiz. Bu tasarım yapısını oluşturduktan sonra onboarding ekranımızı tamamlamış oluyoruz.
Onboarding ekranına ait kodlara buradan ulaşabilirsiniz.
Biraz uzun olmasından dolayı ve okunaklılığı artırmak amacıyla, izninizle yazıyı burada “Part 1” olarak tamamlamak istiyorum. Çok yakında “Part 2” de görüşmek üzere.
Yazıyı okuyarak zaman ayırdığınız ve sabırla sonuna kadar geldiğiniz için teşekkür ederim, umarım faydalı olmuştur.
Ve ayrıca teşekkür ederim:
Adem ile birlikte geliştirdiğimiz açık kaynak projeye buradan ulaşabilir ve bize destek verebilirsiniz :
Not: Proje; sınav, yoğun çalışma temposu ve benzeri nedenlerden dolayı henüz tamamlanamamıştır.
Bu yazımı gözden geçirip geri bildirim verenlere özel teşekkür etmek istiyorum.
Bana aşağıdaki adreslerden ulaşabilirsiniz:
