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.

Steps to build an flutter application with a Convex Bottombar

Step 1 : Adding dependency

One can add the convex_bottom_bar dependency in the pubspec.yaml file as shown below:

convex_bottom_bar: ^3.2.0

Now, click on the pub get button in android studio or visual studio code or run the below command in terminal.

flutter pub get

Step 2 : Importing dependency

To import the convex_bottom_bar dependency in the main.dart file use the following:

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Step 3 : Creating a App structure

Use the StatefulWidget to create a simple app structure for the application as shown below:

Step 4 : 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:

Icons.play_arrow
Icons.museum
Icons.book

Complete Source Code (main.dart):

Output: