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

Avatar
Rishabh Sharma
You can find me on Github & LinkedIn

Latest news

One Plus 8T: All you need to know!

One Plus unveiled its 2020 flagship in a virtual event named One Plus 8T. In this post we would go through its...

Twitter may launch new features to simplify direct messages.

Twitter is said to be working on a couple of new features that could make it easier to manage direct messages...

Zoom Adds External Authentication Feature to make Virtual Classrooms more secure.

Zoom has introduced an external authentication feature to make virtual classrooms more secure. SSO will allow students to log in one...

Facebook, Twitter take action over Trump’s misleading COVID-19 posts.

Facebook and twitter took action on posts from US president Donald Trump on Tuesday for violating their rules against coronavirus misinformation...

Related news

One Plus 8T: All you need to know!

One Plus unveiled its 2020 flagship in a virtual event named One Plus 8T. In this post we would go through its...

Twitter may launch new features to simplify direct messages.

Twitter is said to be working on a couple of new features that could make it easier to manage direct messages...

Zoom Adds External Authentication Feature to make Virtual Classrooms more secure.

Zoom has introduced an external authentication feature to make virtual classrooms more secure. SSO will allow students to log in one...

Facebook, Twitter take action over Trump’s misleading COVID-19 posts.

Facebook and twitter took action on posts from US president Donald Trump on Tuesday for violating their rules against coronavirus misinformation...