Flutter BottomNavigationBar sol tarafa nasıl yerleştirilir

Merhaba çok faydalı olacağını düşündüğüm bu yazımızda karşınızdayız. Flutter bottomnavigationbar sol tarafa nasıl yerleştirilir i bir örnekle anlatıyor olacağız. Bunu yapmak için NavigationRail sınıfını kullanacağız. NavigationRail sınıfı nedir nasıl kullanılır bilmiyorsanız buradan ilgili makaleyi okuyabilirsiniz.

Daha önce BottomNavigationBar kullanımını anlattığımız yazımızı buradan okumanızı tavsiye ederiz.

Daha önce yaptığımız çalışma üzerinden devam edelim. Uygulama boyutu belirli bir düzeyin üzerine çıktığında bottomnavigationbar sol tarafa geçmesini sağlayacağız. Önceki kodu hatırlayalım.

BottomNavigationBar kullanımı

 final List<Widget> _tabItems = [
    const Dashboard(),
    const Product(),
    const ProductsActivities(),
    const Technic(),
    const Currents(),
    const Settings(),
  ];

void _onTapItem(int index) {

  setState(() {
    _selectedIndex= index;
  });
}
int _selectedIndex = 0;  
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',
      ),
    ],
 currentIndex: _selectedIndex, 
 onTap: _onTapItem,  
  ),
 body: Center(
    child: _tabItems[_selectedIndex],
  ),
);

Bu kodu açıklamak gerekirse scaffold içerisinde bir appBar bir bottomNavigationBar ve birde body oluşturmuştuk. bottomNavigationBar içerisine butonlarımızı ekleyip ve birde Liste oluşturup içerisinde geçiş yapacağımız sayfaları sırasıyla ekledik. BottomNavigationBar içerisinde oluşturduğumuz değişkeni currentIndex e atadık ve onTap özelliğine de bir metot oluşturduk. Bu metot her butona tıklandığında buton indexini oluşturduğumuz değişkene eşitleyecektir. Son olarak body özeliğinde sayfalarımızın içinde olduğu listeyi çağırıp değişkenimizin denk geldiği sayfayı açmıştık.

BottomNavigationBar sol tarafa nasıl yerleştireceğimiz bu durumdan biraz farklıdır. İlk olarak bottomNavigationBar boyut değişitiğinde kaybolması için bir if eklemeliyiz.

 final List<Widget> _tabItems = [
    const Dashboard(),
    const Product(),
    const ProductsActivities(),
    const Technic(),
    const Currents(),
    const Settings(),s
  ];

void _onTapItem(int index) {

  setState(() {
    _selectedIndex= index;
  });
}
int _selectedIndex = 0;  
Scaffold(
  appBar: AppBar(
    title: const Text('Takip Sistemi'),
  ),
  bottomNavigationBar: MediaQuery.of(context).size.width < 640 ? //New
    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',
      ),
    ],
 currentIndex: _selectedIndex, 
 onTap: _onTapItem,  
  )
: null,  //New
 body: Center(
    child: _tabItems[_selectedIndex],
  ),
);

BottomNavigationBar Left Side

Sol tarafta bottomnavigationbar oluşturabilmek için yapmamız gereken şey esasında sayfayı ikiye bölmek diyebiliriz ve kullanacağımız sınıf NavigationRail sınıfıdır.

Scaffold Body kısmında dümdüz sayfayı çağırmak yerine ilk olarak NavigationRail sınıfı ile menümüzü oluşturup daha sonra sayfanın kalan tarafına çağırdığımız sayfaları Expanded edeceğiz.

 final List<Widget> _tabItems = [
    const Dashboard(),
    const Product(),
    const ProductsActivities(),
    const Technic(),
    const Currents(),
    const Settings(),s
  ];

void _onTapItem(int index) {

  setState(() {
    _selectedIndex= index;
  });
}
int _selectedIndex = 0;  
Scaffold(
  appBar: AppBar(
    title: const Text('Takip Sistemi'),
  ),
  bottomNavigationBar: MediaQuery.of(context).size.width < 640 ?
    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',
      ),
    ],
 currentIndex: _selectedIndex, 
 onTap: _onTapItem,  
  )
: null,
//New
      body: Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          if (MediaQuery.of(context).size.width >= 640)
            LayoutBuilder(builder: (context, constraint) {
              return SingleChildScrollView(
                child: ConstrainedBox(
                  constraints: BoxConstraints(minHeight: constraint.maxHeight),
                  child: IntrinsicHeight(
                    child: SizedBox(
                      width: 130,
                      child: NavigationRail(
                        minWidth: 20.0,
                        selectedIndex: _selectedIndex,
                        onDestinationSelected: _onTapItem,
                        labelType: NavigationRailLabelType.all,
                        selectedLabelTextStyle: const TextStyle(
                          color: Colors.blueAccent,
                        ),
                        selectedIconTheme: const IconThemeData(
                            color: Colors.blueAccent, size: 30),
                        unselectedIconTheme: const IconThemeData(
                            color: Colors.grey, opacity: 1.0, size: 25.0),
                        unselectedLabelTextStyle: const TextStyle(
                          color: Colors.grey,
                        ),
                        leading: InkWell(
                          child: Column(
                            children: [
                              const SizedBox(
                                height: 8,
                              ),
                              CircleAvatar(
                                radius: _selectedIndex == 5 ? 22 : 20,
                                backgroundColor: Colors.blueGrey,
                                child: Icon(
                                  Icons.person,
                                  size: _selectedIndex == 5 ? 24 : 20,
                                ),
                              ),
                              Row(
                                children: const [
                                  Expanded(
                                    child: Text(
                                      "Kullanıcı Adı",
                                      style: TextStyle(
                                          color: Colors.blueAccent,
                                          fontSize: 13),
                                      textAlign: TextAlign.center,
                                    ),
                                  ),
                                ],
                              ),
                              Text(
                                "Person",
                                style: const TextStyle(
                                    color: Colors.black38, fontSize: 12),
                                textAlign: TextAlign.center,
                              ),
                            ],
                          ),
                          onTap: () {
                            setState(() {
                              _selectedIndex = 5;
                            });
                          },
                        ),
                        destinations: const [
                          NavigationRailDestination(
                              icon: Icon(Icons.stacked_bar_chart_rounded),
                              label: Text('Dashboard')),
                          NavigationRailDestination(
                              icon: Icon(Icons.list),
                              label: Text('Stok Yönetimi')),
                          NavigationRailDestination(
                              icon: Icon(Icons.compare_arrows_rounded),
                              label: Text('Hareket Yönetimi')),
                          NavigationRailDestination(
                              icon: Icon(Icons.electrical_services_rounded),
                              label: Text('Teknik Servis')),
                          NavigationRailDestination(
                              icon: Icon(Icons.business_center_rounded),
                              label: Text('Cari Yönetimi')),
                           
                        ],
                      ),
                    ),
                  ),
                ),
              );
            }),
          Expanded(child: _tabItems[_selectedIndex]),
        ],
      ),
);

Scaffold Body tarafında yaptığımız değişikliği anlatmak gerekirse;

Row içerisine Uygulama boyutuğu büyüdüğünde görünür olacak bir widget oluşturduk. LayoutBuilder widgeti ile sarmaladğımız bu widget içerisinde NavigationRail kullanarak bir avatar alanı ve menude bulunmasını istediğimiz butonları NavigationRailDestination yardımıyla oluşturduk ve son olarak Expanded ile aktif olan sayfamızı çağırmış olduk.