Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 220.127.116.11 release ready!
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.
Add the following dependencies in your pubspec.yaml file.
After adding dependencies run the pub get command.
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.
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.😇
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.