Animated Navigation-Bar in Flutter

The Burger-Menu is kind of outdated now. we all can observe that It’s all about Navigation-bars. Time to see how flutter let us play with Navigation bar also not just simple Navigation Bar even the animated kind we can see below.

Animated Navigation-Bar in Flutter 1

Again we have two options to create a Navigation bar.

  • In-built features. 

This feature is available in Scaffold( ) >> bottomNavigationbar : .

And then write your own code. To check out that option. Documentation is the best way to approach.

(link:https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html)

  • Third-party package for easy use.

The third-party will Reduce your efforts and will provide a better version of the task. In this blog, we will be using yet another package that will provide us with an animated version of Navigation Bar.

Scaffold( ) >> bottomNavigationbar : curvedNavigationBar()

(Disclaimer: I have not developed this package but I have used it many times and it gives me the best results so far. You can check the official documentation for the package in  https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html ).

But before that, I want to explain to you a little bit about the Navigation bar from my end. So yes basically as the name suggests it is used to navigate through screens, you can use swipe gesture or tap to play with them. The example, we are going to look below will contain only three elements you can definitely change according to your need.

Essentials:

  • Pubsec.yaml dependices: 

Dependencies:

curved_navigation_bar: ^ 0.3.3

  • Now import:
    • import ‘package:curved_navigation_bar/curved_navigation_bar.dart’;

Now time for some real deal. It’s coding time. 

After the successful importing and adding of package dependencies. Its time to look up the code.

Some Screenshots just to get the idea what are we trying to accomplish here: 

1.

Animated Navigation-Bar in Flutter 2

2.

Animated Navigation-Bar in Flutter 3

3. 

Animated Navigation-Bar in Flutter 4        

That’s pretty much it and now how to code it out. 

Scaffold( appbar: ...... ,
body: .... ,
....
....
bottomNavigationBar: CurvedNavigationBar(
        color: Colors.white,
        backgroundColor: Colors.deepOrange,
        buttonBackgroundColor: Colors.white,
        height: 50.0,
        index: 1,
        animationDuration: Duration(
          milliseconds: 200,
        ),
        animationCurve: Curves.bounceIn,
        items: <Widget>[
          Icon(Icons.verified_user, size: 20.0),
          Icon(Icons.add, size: 20.0),
          Icon(Icons.watch_later, size: 20.0),
        ],
        onTap: (index) {
          debugPrint('Any function you want to do example: navigate to screen');
        },
      ) 
);

Properties:

  • color: // color of the navigation bar.
  • backgroundColor: // background color for the icon Animation.
  • buttonBackgroundColor: //  background color for the button.
  • animationDuration: // animation duration in millisonds {example: Duration(

          milliseconds: 200,

        ),    }

  • animationCurve: // type of animation you want (example: Curves.bounceIn)        
  • Items: // In this party can customize accordingly I have used icons that SDK provides. You can use images two or your own icons.
  • index: // indexing the items from the above example it is ”1”.
  • onTap( ): // In this you have to specify the ontap action for each index. 

  For example in onTap( ) : (index) {

/// use if-else statements to navigate to different screens

    }

That’s all about CurveNavigationBar in flutter if any doubts visit the resources below:

Resources:

  • Package Documentation:

https://pub.dev/packages/curved_navigation_bar

Rishabh Sharma

Rishabh Sharma

You can find me on Github & LinkedIn

We Recommend