Bu yazımızda flutter üzerinde yazmakta olduğunuz uygulamanıza alt erişim butonları yani BottomNavigationBar nasıl eklenir sorusunu cevaplıyor olacağız.
Dilerseniz Bir proje tasarlamakla başlayalım. Cari takibi yapabileceğimiz bir projede alt erişim butonlarını kullanarak kullanıcının sayfaları görmelerini ve bir parmak dokunuşuyla hızlıca diğer sayfalara geçiş yapabilmelerini sağlayalım. İşte tam bu yüzden flutter BottomNavigationBar widgeti bizim için en uygun tercih olacaktır.
Flutter’da BottomNavigationBar nedir?
BottomNavigationBar, bir Flutter uygulamasının altında bir dizi küçük pencere öğesi görüntüleyen bir pencere öğesidir. Genellikle, yaklaşık üç ila beş öğeyi göstermek için kullanılır. Her öğenin bir etiketi ve bir simgesi olmalıdır. her seferinde bir öğe seçmenize ve belirli bir sayfaya hızla gitmenize olanak tanır.
Şimdi basit bir BottomNavigationBar
oluşturma sürecini adım adım inceleyelim. Bitmiş ürün aşağıdaki gibi görünecektir:
BottomnavigationBar
kullanmak için çok yaygın olarak kullanılan Scaffold
sınıfını kullanıyor olacağız. Scaffold
sınıfını merak ediyorsanız bu makaleyi inceleyebilirsiniz.
Scaffold bottomNavigationBar ekle
Scaffold(
appBar: AppBar(
title: const Text('Takip Sistemi'),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.stacked_bar_chart_rounded),
label: 'Dashboard',
),
BottomNavigationBarItem
(
icon: Icon
(Icons
.list),
label: 'Stok Yönetimi',
),
BottomNavigationBarItem
(
icon: Icon
(Icons
.compare_arrows_rounded),
label: 'Hareket Yönetimi',
),
BottomNavigationBarItem
(
icon: Icon
(Icons
.electrical_services_rounded),
label: 'Teknik Servis',
),
BottomNavigationBarItem
(
icon: Icon
(Icons
.business_center_rounded),
label: 'Cari Yönetimi',
),
],
),
);
Oluşturduğumuz Scaffold
clasına AppBar
ile bottomNavigationBar
ekledik ve içerisine asıl öğeyi göstermek için BottomNavigationBarItem
kullandık.
Yukarıdaki kod, yalnızca BottomNavigationBar
‘ı ilk öğe varsayılan olarak seçili olarak görüntüler. Diğer öğelere tıkladığımızda seçimi değiştirmez. Butona basıldığında ilgili butonun seçilmesi ve öğenin seçilmesi için onTap
ve currentIndex
özelliklerini kullanacağız.
Öğeleri Seç
int _selectedIndex=0; //New BottomNavigationBar( items: const <BottomNavigationBarItem>[ ... ], currentIndex: _selectedIndex, //New onTap: _onTapItem, //New ), //New void _onTapItem(int index) { setState(() { _selectedIndex= index; }); }
_selectedIndex
değişkeni, seçili olan öğenin değerini tutar ve her seçimde _onTapItem
metodunun döndüğü index
i _selectedIndex
e eşitler.
Sayfalar Arasında Geçiş
Seçilince açılacak olan sayfaları ekledik olarak varsayıyorum ve devam ediyorum. Öncelikle bir list oluşturalım ve sayfaları içerisine koyalım.
final List<Widget> _tabItems = [ const Dashboard(), const Product(), const ProductsActivities(), const Technic(), const Currents(), const Settings(), ];
Şimdi scaffold
içerisine body
ekleyerek sayfalarımızı listenin indexine göre değiştirelim.
Scaffold( appBar: AppBar( title: const Text('Takip Sistemi'), ), body: Center( child: _tabItems[_selectedIndex], //New ), bottomNavigationBar: BottomNavigationBar( ... ), );
Sonuç aşağıdaki gibi olacaktır.
Umarım faydalı olmuştur bir sonraki yazımızda görüşmek üzere.
Flutter ile ilgili konularımızı Buradan inceleyebilirsiniz.