Bottom Navigation Bar Kullanımı

Flutter'da bottom navigation bar nasıl kullanılır ?

Bottom Navigation Bar Nedir ?

Geliştirilen çoğu uygulamalarda görmüş olduğumuz, en altta bulunan sayfa geçiş işlemlerine olanak sağlan buton gruplarının adıdır.

Kullanım Örneği

Butonlar arası geçişlerde, sayfayı değiştirebilmeniz adına index tutmanız gerekmektedir. Tutacağınız bu index ile, ilgili index'e karşılık gelecek sayfanızı veya widget içeriğini ekrana yansıtabilirsiniz. Örnek kullanalım.

int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
    Text('Anasayfa', style: optionStyle),
    Text('Hakkında', style: optionStyle),
    Text('Linknect', style: optionStyle),
  ];

Yukarıda göreceğiniz gibi, selectedIndex ve _widgetOptions tanımlanması yapılmıştır. widgetoptions ile buton index'ine karşı gelecek sayfa tasarımlarımızı tutuyoruz. selectedIndex değeri ile seçilen index değerini tutabilirsiniz.

Şimdi butonlara tıklandığında selectedIndex değişimini tamamlayalım. Aşağıdaki örnekten erişebilirsiniz.

//? State yönetiminde setState kullanımı olmadığını göreceksiniz.
  void _onItemTapped(int index) {
    //? setState: Tüm sayfanın yeniden yazılmasına olanak sağlar, bu sayede seçili index değişir.
    setState(() {
      _selectedIndex = index;
    });
  }

Yukarıda tanımlamış olduğumuz method ve değişkenler bir view_model, controller vb. gibi kısımlara tanımlanmalıdır. View içerisine sadece view kodları bulunmaktadır. Ayrıca state yönetimini öğrendiğiniz taktirde, setState kullanımınında kalktığını göreceksiniz.

View tarafını yazdığımız kodlarla beraber ilgili düzenlemimizi tamamlayalım.

 Scaffold(
        appBar: AppBar(),
        //? selectedIndex değerine göre body alanına gelecek widget
        body: Center(child: _widgetOptions.elementAt(_selectedIndex)),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            //? Alt menüde bulunan her bir element
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Anasayfa'),
            BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Hakkında'),
            BottomNavigationBarItem(icon: Icon(Icons.factory), label: 'Linknect'),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
        ))

Bottom NavigationBar'ı bu şekilde projelerinize entegre edebilirsiniz.

turkce_flutter_egitimi/lib/widgets/bottom_navigation_bar/bottom_navigation_bar_widget.dart at main · umutocak/turkce_flutter_egitimiGitHub