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…