A beautiful and animated bottom navigation bar

animated  bottom navigation bar

a beautiful and animated  bottom navigation bar. the navigation bar use your current theme, but you are free to customize it.

fix

support setstate to change bottomnavybar’s _selectindex,just copy bottom_navy_bar.dart into your project

pageview

getting started

add the plugin:

dependencies:
  ...
  bottom_navy_bar: ^3.0.0

basic usage

adding the widget

bottomnavigationbar: bottomnavybar(
   selectedindex: _selectedindex,
   showelevation: true, // use this to remove appbar's elevation
   onitemselected: (index) => setstate(() {
              _selectedindex = index;
              _pagecontroller.animatetopage(index,
                  duration: duration(milliseconds: 300), curve: curves.ease);
    }),
   items: [
     bottomnavybaritem(
       icon: icon(icons.apps),
       title: text('home'),
       activecolor: colors.red,
     ),
     bottomnavybaritem(
         icon: icon(icons.people),
         title: text('users'),
         activecolor: colors.purpleaccent
     ),
     bottomnavybaritem(
         icon: icon(icons.message),
         title: text('messages'),
         activecolor: colors.pink
     ),
     bottomnavybaritem(
         icon: icon(icons.settings),
         title: text('settings'),
         activecolor: colors.blue
     ),
   ],
)

customization (optional)

bottomnavybar

iconsize – the item icon’s size

items – navigation items, required more than one item and less than six

currentindex – the current item index. use this to change the selected item. default to zero

onitemselected – required to listen when a item is tapped it provide the selected item’s index

backgroundcolor – the navigation bar’s background color
showelevation – if false the appbar’s elevation will be removed

bottomnavybaritem

activecolor – the active item’s background and text color

inactivecolor – the inactive item’s icon color