Discount !! E-commerce App With Backend Source Code Video and Voice Chatting App Firebase Chatting App Source Code Complete Gym App BLoC State Management Source Code Complete Study App Buy Ticket Booking App Source Code Payment App Buy Travel App With Backend Source Code Complete Chat App Udemy Course Special Offer Discount !! Online Learning Course App (BLoC) Discount !! Online Learning Course App (Riverpod) Discount !! Online Learning Course App (Getx)

Flutter Bottom Navigation Bar Explained

Flutter Bottom Navigation Bar Explained

    Flutter Bottom Navigation Bar

    Just like any other Bar in Flutter, Bottom Navigation Bar takes one important property.

    √ BottomNavigationBar

    It takes items property and items property take list of children. So any kind widget that has Bar keyword(like tabbar, tabbarview or sliverappbar), takes list of children.

    It takes other few important property like

    √ onTap

    √ currentIndex

    We use onTap property to change the index of the selected item and get selected. And then we pass this index to the currentIndex.

     

    If you can not change the background color of the bottom navigation bar, see the video

    The background color changes, if you have a fourth tab bar in the bottom navigation bar item. Flutter changes the background color to the default one if you add more than three tabs. The fourth tab creates shifting in position if you click on the tab bar item. To solve this you need to 

    type:BottomNavigationBarType.fixed

     

    If you get error like this 

    'package:flutter/src/painting/text_painter.dart': Failed assertion: line 900 pos 12: '!_needsLayout': is not true.

    You get this error if you have the below property settings for flutter bottom navigation bar 

       showSelectedLabels: false,
   showUnselectedLabels: false,

    To over this issue, you can set another two properties

    unselectedFontSize: 0.0,
selectedFontSize: 0.0,

    Now the overall bottom navigation bar code should look like this

     @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        /*
        below two lines helps with the error of needs layout
         */
        unselectedFontSize: 0.0,
        selectedFontSize: 0.0,
        type:BottomNavigationBarType.fixed,
        backgroundColor: Colors.white,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        elevation: 0,
        onTap: onTap,
        currentIndex: currentIndex,
        items: [
           BottomNavigationBarItem(title:Text("Home"),icon: Icon(Icons.apps)),
           BottomNavigationBarItem(title:Text("Bar"),icon: Icon(Icons.bar_chart)),

          BottomNavigationBarItem(title:Text("Search"),icon: Icon(Icons.search)),
          BottomNavigationBarItem(title:Text("Me"),icon: Icon(Icons.person))
      ],

      ),
    );
  }

    Recent posts