Flutter İle Bir Ekranın Hikayesi #1
Selamlar 👋🏼
Flutter ile yaptığım ekran kodlamalarını bir yazı serisi olarak paylaşmaya karar verdim. Bu seride genel olarak seçtiğim bir ekranı Flutter ile kodlayıp kullandığım yapıları anlatacağım.
Ekran Seçimi Yaparken
Bu yazı serisinde uygulamalarda sık gördüğümüz yapıları içeren ekranlar seçmeyi hedefliyorum. Kullandığım ekranları Dribbble ve Uplabs gibi içerisinde ücretsiz ve güzel tasarımların bulunduğu web sitelerinden seçeceğim.
İlk ekranımızı yine içerisinde kullanılacak olan yapılara bakarak seçtim . Bir müzik çalar uygulaması 🎧
Ekran içerisinde, mobil uygulamalarda sıklıkla kullanılan;
- Sliver App Bar
- List View
- Bottom Navigation Bar
gibi yapılar olduğu için böyle bir ekranda karar kıldım.
Ekranı analiz ederek işe başlayalım 🎬
İlk işim ekranı bu şekilde parçalara ayırmak oldu. Yazının devamında ekranda bulunan yapılardan ve bu yapıları nasıl kullandığımdan bahsedeceğim. Kodlamaya başlamadan önce tasarımı indirdikten sonra Adobe XD ile açıp uygulamada kullanılacak olan resimleri eklemeyi unutmayalım.
Artık hangi yapıları kullanacağımızı kararlaştırdığımıza göre kodlamaya geçelim.
SliverAppBar Kullanımı
Sliver App Bar yapısı uygulamalarda sık karşılaştığımız yapılardan birisi, Flutter bize bu yapıyı istenildiği gibi özelleştirmeye olanak sağlıyor.
- expandedHeight : AppBarın kaplayacağı yükseklik için kullandığımız bir parametre
- pinned : Pinned parametresi ekran yukarı kaydırıldığında AppBarın görünürlüğünün kontrolünü sağlar. Ben bu ekranda false olarak kullandım.
- flexibleSpace : Bu parametre ile SliverAppBarın içerisine gerekli olan her şeyi ekleyebiliyoruz.
SliverAppBarItem()
Burada ise resmin üzerine gelecek yazıları oluşturdum. Yazılar dikey bir şekilde olacağı için Column kullandım ve ekranda ki yerini ayarlamak için ise Padding ile sarmaladım.
ListView Kullanımı
ListView verileri listelemek için kullandığımız bir yapıdır. Dikey veya yatay olarak kullanılabilir.
scroolDirection ile listenin yönünü belirledim. ListViewItem ile listenin içine yerleştireceğim yapıları tasarladım.
ListViewItem()
ListView elemanlarını tek tek oluşturmak yerine kendi widgetimi oluşturdum. İmage ve iki tane text parametresi alıp tasarladığım yapının içine yerleştiriyorum.
BottomNavigationBar Kullanımı
BottomNavigationBar yapısı sayfaların en alt kısmında gördüğümüz genellikle içerisinde icon butonların kullanıldığı yapılardır.
Belirlediğimiz ekranda iki farklı BottomNavigationBar kullanılmış. Böyle bir yapıyı oluşturabilmek için HomePage.dart içinde iki adet iç içe Scaffold tanımladım.
En alttaki BottomNavigationBar içine items ile üç tane icon yerleştirdim. Height ile BottomNavigationBar yüksekliğini belirledim.
Üstteki BottomNavigationBar içinde ise items yerine Row yapısını kullanmayı tercih ettim bu bana içerisine yerleştireceğim widgetlar için daha kolay bir kullanım sağladı.
Container Kullanımı
Bu ekran için yandaki gibi bir yapıya ihtiyacım oldu. Bu yapıya ulaşmanın bir kaç yolu daha var fakat ben Container oluşturup yapmayı tercih ettim.
- decoration: Container’a şekil vermek ve benzeri şeyler için kullanılır.
- shape: BoxDecoration ile kullanılır. BoxShape.circle ile dairesel bir Container elde edilir.
- color: Color hem Container içinde hem de decoration içinde kullanılabilir. ✋ Ama dikkat sadece birinde kullanılmalı aksi halde hata ile karşılaşılır.
- border: Container ‘ın etrafını boyamak için Border.all ile birlikte kullandım. with ile containerın etrafındaki çizginin kalınlığını belirledim. Border.all yerine sadece Border() kullanılarak istenilen köşeler ayrı ayrı renklendirilebilir.
- image: Container’ın arka planına resim koymak için kullanılır.
HomePage()
Ekranımızın bütün parçalarını oluşturduktan sonra home_page.dart içerisinde bu şekilde kullandım.
Buradakilere ek olarak kullandığım style dosyaları da bulunmaktadır. Githubtan projenin bütün kaynak kodlarını inceleyebilirsiniz.
- Kaynak kodlar
