A Convex Bottombar is a app bar designed such a way that there is a convex sphape 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 assest for the content of the bottom bar. Here for the sake of simplicity we will be using Flutter inbuilt icons namely:
Complete Source Code:
- Getting Started with Cross-Platform Mobile Application using Flutter
- MaterialApp class in Flutter
- Difference between React Native and Flutter
- Scaffold class in Flutter with Examples
- Difference Between Rows and Columns vs Container in Flutter
- Multi Page Applications in Flutter
- Routes and Navigator in Flutter
- Flutter GridView
- Container class in Flutter
- Difference Between Stateless and Stateful Widget in Flutter
- Rive animations in Flutter
- ProgressIndicator in Flutter
- Row and Column Widgets in Flutter with Example
- Flutter - Stateful vs Stateless Widgets
- Wrap Widget in Flutter
- Listview.builder in Flutter
- Splash Screen in Flutter
- How to Add images in Flutter App?
- A Hello World App using Flutter
- Raised Button widget in Flutter
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.