flutter bottom navigation bar

 

1. result

 

2. how to make?

 

1) code

      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        backgroundColor: Colors.pink,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white54,
        items:const [
          BottomNavigationBarItem(
            icon:Icon(Icons.home_outlined),
            label : 'home'
          ),
          BottomNavigationBarItem(
            icon:Icon(Icons.shopping_bag_outlined),
            label : 'cart'
          ),
          BottomNavigationBarItem(
              icon:Icon(Icons.add_box_outlined),
              label : 'add'
          ),
        ]

      ),

2) explanation

(1) bottomnavigationbar

bottomNavigationBar: BottomNavigationBar(
  type:BottomNavigationBarType.fixed,
  backgroundColor: Colors.pink,
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.white54,
  items:const [
    BottomNavigationBarItem(

scaffold has body, appBaar, bottomNavigationBar

We can use bottomNavigationBar to call BottomNavigationBar ().

inside of  BottomNavigationBar(), we can define the type of bar, colors of bar and each items of bar.

Items can be considered as a list by <items : [ ]>

BottomNavigationBarItem(
  icon:Icon(Icons.home_outlined),
  label : 'home'
),

< items : [ ] > can have  BottomNavigationBarItem suchas icons and labels.

Becareful that if the label is null, the program may not run appropriately.

 

BottomNavigationBarItem(
  icon:Icon(Icons.home_outlined),
  label : 'home'
),
BottomNavigationBarItem(
  icon:Icon(Icons.shopping_bag_outlined),
  label : 'cart'
),
BottomNavigationBarItem(
    icon:Icon(Icons.add_box_outlined),
    label : 'add'
),

items of the bar follows the order of the order of Flutter code.