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 the Navigation bar also not just the simple Navigation Bar even the animated kind we can see below.

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 this.

(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 the 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 at 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 gestures or tap to play with them. The example, we are going to look at 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. It’s time to look up the code.

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

1.

2.

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