Flutter BottomNavigationBar Nasıl Oluşturulur

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.