Flutter AppBar Deyip Geçmeyin…!

Bir önceki blog konumuz Scaffold idi. Şimdi ise Scaffold içerisinde bulunan “appBar” propertisi ile kullanılan “AppBar Widget”. En temel anlamda AppBar; uygulama ekranın üst kısmındaki uygulama çubuğudur.

Actions, bottom,leading, title gibi property’lerden oluşur.  Genellikle aşağıdaki şekildeki gibi konumlandırılır.  

Artık ufak ufak bu property’leri incelemeye başlayalım:

title: AppBar alanına başlık yazdırılmasını sağlayan widget’tır.

Brightness: AppBar çubuğunun karanlık mı parlak mı olacağını belirler. İki tür kullanımı vardır. “light”(parlak) kullanılırsa appBar üzerinde bulunan saat, şarj durumu iconlarının rengi siyaha döner. “dark”(karanlık) kullanılması durumunda ise bu iconlar beyaz olur.

backgroundColor: Birçok widget içerisinde kullanılabilir. Kullanıldığı widget’ın arka plan rengini değiştirmemize yarar. Bir Flutter uygulaması çalıştırmaya başladığımız anda uygulamanın AppBar kısmının arka plan rengi default’ta mavi olarak ayarlanmıştır. Gelin aşağıdaki örnekle birlikte bu rengi mora dönüştürelim.

leading: Başlıktan önce(title) görüntülenen widget’tır. Buranın içinde genelde Icon, IconButton ya da CircleAvatar widget’ları kullanılır. Ben örneğimde iconlar classı’nın içerisindeki “menu” ikonunu tercih ettim. Icon Class’ı gelecekteki blog konularımın içerisinde yer alacak. Fakat bu aşamada meraklısına iki adet link bırakıyorum 🙂

https://api.flutter.dev/flutter/widgets/Icon-class.html

https://www.fluttericon.com

actions: Başlık widget’ından sonra bir satırda görüntülenecek widget’lardır. Genellikle burada IconButton’lar kullanılarak eylemler, ayarlar gibi ikonlar kullanılır.  Aşağıdaki örneği incelediğimizde birer tane “IconButton” ve “FlatButton.Icon” widget kullanılmıştır. Her ikisi içinde tıklandıkları zaman (onPressed) yapılacak işlem bu aşamada boş bırakılmıştır. 

bottom: Buradaki alt kısımda ise sekmeler oluşturulur. Bu işlemi “TabBar” widget kullanarak yapılır. Aşağıdaki örnekte TabBar içerisine 3 tane icon yerleştirilmiştir. Ve Scaffold’un body kısmında “TabBarView” widget’tan yardım alarak, tıklandıklarında bu ikonlar gösterilebilinir.

Bir sonraki blogumda örnek birkaç appBar görüntüsü kodlayacağız. Şimdilik hoşçakalın… 🙂

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.