Flutter Convex Bottombar (original) (raw)

Last Updated : 23 Jul, 2025

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:

Dart `

class MyApp extends StatefulWidget { const MyApp({super.key});

@override State createState() => _MyAppState(); }

class _MyAppState extends State { @override Widget build(BuildContext context) { return Scaffold( ... ); } }

`

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:

Dart `

class HelloConvexAppBar extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('GeeksForGeeks'), backgroundColor: Colors.green, foregroundColor: Colors.white ), body: Center(), bottomNavigationBar: ConvexAppBar( style: TabStyle.react, backgroundColor: Colors.green, items: [ TabItem(icon: Icons.play_arrow), TabItem(icon: Icons.museum), TabItem(icon: Icons.book), ], initialActiveIndex: 1, onTap: (int i) => print('click index=$i'), ), ); } }

`

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):

Dart `

import 'package:convex_bottom_bar/convex_bottom_bar.dart'; import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget { @override State createState() => _State(); }

class _State extends State { @override Widget build(BuildContext context) { return MaterialApp( initialRoute: "/", routes: { "/": (BuildContext context) => HelloConvexAppBar(), }, ); } }

class HelloConvexAppBar extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('GeeksForGeeks'), backgroundColor: Colors.green, foregroundColor: Colors.white, ), body: Center(), bottomNavigationBar: ConvexAppBar( style: TabStyle.react, backgroundColor: Colors.green, items: [ TabItem(icon: Icons.play_arrow), TabItem(icon: Icons.museum), TabItem(icon: Icons.book), ], initialActiveIndex: 1, // optional onTap: (int i) => print('click index=$i'), ), ); } }

`

**Output: