animated-bottom-navigation-bar

animatedbottomnavigationbar is a customizable widget inspired by dribble shot.

getting started

to get started, place your animatedbottomnavigationbar in the bottomnavigationbar slot of a scaffold.
the animatedbottomnavigationbar respects floatingactionbutton location.
for example:

scaffold(
   body: container(), //destination screen
   floatingactionbutton: floatingactionbutton(
      //params
   ),
   floatingactionbuttonlocation: floatingactionbuttonlocation.centerdocked,
   bottomnavigationbar: animatedbottomnavigationbar(
      icons: iconlist,
      activeindex: _bottomnavindex,
      gaplocation: gaplocation.center,
      notchsmoothness: notchsmoothness.verysmoothedge,
      leftcornerradius: 32,
      rightcornerradius: 32,
      ontap: (index) => setstate(() => _bottomnavindex = index),
      //other params
   ),
);

customization

animatedbottomnavigationbar is customizable and works with 2, 3, 4, or 5 navigation elements.

scaffold(
   bottomnavigationbar: animatedbottomnavigationbar(
      icons: iconlist,
      activeindex: _bottomnavindex,
      ontap: (index) => setstate(() => _bottomnavindex = index),
      //other params
   ),
);

scaffold(
   bottomnavigationbar: animatedbottomnavigationbar(
      icons: iconlist,
      activeindex: _bottomnavindex,
      leftcornerradius: 32,
      rightcornerradius: 32,
      ontap: (index) => setstate(() => _bottomnavindex = index),
      //other params
   ),
);

scaffold(
   floatingactionbutton: floatingactionbutton(
      //params
   ),
   floatingactionbuttonlocation: floatingactionbuttonlocation.enddocked,
   bottomnavigationbar: animatedbottomnavigationbar(
      icons: iconlist,
      activeindex: _bottomnavindex,
      gaplocation: gaplocation.end,
      notchsmoothness: notchsmoothness.defaultedge,
      ontap: (index) => setstate(() => _bottomnavindex = index),
      //other params
   ),
);

scaffold(
   floatingactionbutton: floatingactionbutton(
      //params
   ),
   floatingactionbuttonlocation: floatingactionbuttonlocation.centerdocked,
   bottomnavigationbar: animatedbottomnavigationbar(
      icons: iconlist,
      activeindex: _bottomnavindex,
      gaplocation: gaplocation.center,
      notchsmoothness: notchsmoothness.defaultedge,
      ontap: (index) => setstate(() => _bottomnavindex = index),
      //other params
   ),
);

scaffold(
   floatingactionbutton: floatingactionbutton(
      //params
   ),
   floatingactionbuttonlocation: floatingactionbuttonlocation.centerdocked,
   bottomnavigationbar: animatedbottomnavigationbar(
      icons: iconlist,
      activeindex: _bottomnavindex,
      gaplocation: gaplocation.center,
      notchsmoothness: notchsmoothness.softedge,
      ontap: (index) => setstate(() => _bottomnavindex = index),
      //other params
   ),
);

scaffold(
   floatingactionbutton: floatingactionbutton(
      //params
   ),
   floatingactionbuttonlocation: floatingactionbuttonlocation.centerdocked,
   bottomnavigationbar: animatedbottomnavigationbar(
      icons: iconlist,
      activeindex: _bottomnavindex,
      gaplocation: gaplocation.center,
      notchsmoothness: notchsmoothness.smoothedge,
      ontap: (index) => setstate(() => _bottomnavindex = index),
      //other params
   ),
);

scaffold(
   floatingactionbutton: floatingactionbutton(
      //params
   ),
   floatingactionbuttonlocation: floatingactionbuttonlocation.centerdocked,
   bottomnavigationbar: animatedbottomnavigationbar(
      icons: iconlist,
      activeindex: _bottomnavindex,
      gaplocation: gaplocation.center,
      notchsmoothness: notchsmoothness.verysmoothedge,
      ontap: (index) => setstate(() => _bottomnavindex = index),
      //other params
   ),
);

driving navigation bar changes

you have to change the active navigation bar tab programmatically by passing a new activeindex to the animatedbottomnavigationbar widget.

class _myappstate extends state<myapp> {
  int activeindex;

  /// handler for when you want to programmatically change
  /// the active index. calling `setstate()` here causes
  /// flutter to re-render the tree, which `animatedbottomnavigationbar`
  /// responds to by running its normal animation.
  void _ontap(int index) {
    setstate((){
      activeindex = index;
    });
  }

  widget build(buildcontext context) {
    return animatedbottomnavigationbar(
      activeindex: activeindex,
      ontap: _ontap,
      //other params
    );
  }
}