Flutter Bottom Navigation Bar Animation

Bottom Navigation Bar is very common in mobile applications. To change the boring interaction when moving between tabs, you may like to animate the navigation bar. In this demo I wanted a curved animation bar. You can create a custom navigation bar by your self or use a package for easy and fast implementation.

If you want to save your time this package is a good choice.

curved_navigation_bar

Implementing this navigation bar is really simple. Add the latest version of the package to your app and import like this.

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

Instead of inbuilt BottomNavigationBar widget, we have to add CurvedNavigationBar widget with the attributes we want.

bottomNavigationBar: CurvedNavigationBar(
        items: const <Widget>[
          Icon(CupertinoIcons.heart_fill,
              size: 30,
              color: Colors.white),
          Icon(CupertinoIcons.add, size: 30, color: Colors.white),
          Icon(CupertinoIcons.music_albums,
              size: 30, 
              color: Colors.white),
        ],
        color: Colors.black,
        buttonBackgroundColor: Colors.redAccent,
        backgroundColor: Colors.white,
        animationCurve: Curves.easeInOut,
        animationDuration: const Duration(milliseconds: 400),
        onTap: (index) {
          setState(() {
            _pageIndex = index;
          });
        },
        letIndexChange: (index) => true,
      ),

You can pass List of widgets as Bottom Navigation items and onTap function to change the page index. You can customise Navigation bar with desired colors, animation curve and animation duration. Even the default values looks really nice and attractive to me.

You can find the attributes of the widget from package read me as well.

If you want to change the page index using any other button, you can add following code lines. It will set the page to the index you pass.

final CurvedNavigationBarState? navBarState =
    _bottomNavigationKey.currentState;
navBarState?.setPage(1);

Finally my demo looks like this with the colors and content that I have used.