Flutter – Convex Bottombar
A Convex Bottombar 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 article, we will build a simple app with one of the simplest form of Convex bottombar.
To build an application that has a Convex Bottombar follow the below steps:
- Import the convex_bottom_bar dependency to the pubspec.yaml file.
- Import the dependency to the main.dart file.
- Create a StatefulWidget for the app structure
- Create StatelessWidget to build the context of the Bottombar
Now, let’s explore the below steps in detail.
One can add the convex bottombar dependency in the pubspec.yaml file as shown below:
To import the convex_bottom_bar dependency in the main.dart file use the following:
Creating a App structure:
Use the StatefulWidget to create a simple app structure for the application as shown below:
Building the Bottombar:
To build the bottom bar for the application use a StatelessWidget with the ContexBuilder to build the content of the bottom bar as shown below:
You can add icons or images or any kind of asset for the content of the bottom bar. Here for the sake of simplicity we will be using Flutter inbuilt icons namely:
Complete Source Code: