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.

7dEfyshwZCdkkSMV o3HC iysdkGyhxRB3bNHFqVgCVl3LLsuLkI5SR WjBLGjnKrGp5Z4aFzpLVZtawfyCzq7s24GFBUy1mUffb9fRD1G4Fg0Lm1c28uK BMseVt21K 3f cw0z

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

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.

w FUShQoDM hzoAeXLDQ1S7nN6coXPpbVtvbGBVy8oJVZSHkSUK8MyVcefhF8LvkURHShf5xs9BelEeYZ82Xo 3ID

2.

8qeznh k9RcgAXW7TRbimSRI TxLzRdAwiFQPJ6yWpnQrAl0ID6XaqpMidzCLCzWDhyTGoZFhbThcgQjX839T6Z8bGi

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

Hot Topics

Related Articles