Convex Bottom Navigation Bar in Flutter

In this blog, we will explore about Implementation of Convex Bottom bar in flutter.

A Convex Bottom bar is a app bar designed such a way that there is a convex shape to it. It can make the UI look great and also improve the way user interacts with the Interface. In this blog, we will build a simple app with one of the simplest form of Convex bottom navigation bar.

To build an application with bottom navigation bar, you need to follow the steps given below.

so, without wasting time let’s start the implementation.

Check out more about our Flutter app development.

Step1 :- Add the dependency.

Add the following dependencies in your pubspec.yaml file.

After adding dependencies run the pub get command.

Step2 :- Code Implementation

First, we need to create a stateful class with the name MyHomePage().

In this class we will create a variable selectedPage type of integer pass with the value zero. and also make a list with the name _pageNo, in which we will pass all the pages which we want to add in bottom navigation bar.

After this,In the body , we will pass the _pageNo with the value of selectedPage. Using the property of scaffold we use bottomNavigationBar. In this, we will create ConvexAppBar() and pass Items, initialActiveIndex and onTap.

In Items, we will pass all the screens which we want to show in our application. And in initialActiveIndex we will pass the variable selectedPage which we already define and in onTap we pass index and define setState().

In the setState we pass selectedPage equal to index.

Step3 :- Create bottom navigation bar screens.

i) Home Screen:

ii) Favorite Screen:

iii) Product screen

Step4 :- Check the Output

Now the implementation of all the screens has been done. It’s time to check the output.

you can check the out in the above video.We have a flutter application with convex bottom navigation bar.

Congratulations!!!! you have learned Implementation of Convex Bottom Navigation bar in flutter.

For more details and methods you can refer to the official doc of flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you with a better understanding in Implementation of Convex Bottom Navigation bar in flutter.

Thanks for reading.😇