Flutter – Convex Bottombar

Last Updated : 03 Mar, 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<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @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<MyApp> {
	@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:

Flutter - Using Google fonts

ddeevviissaavviittaa

Improve

Article Tags :

Flutter – Convex Bottombar

Steps to build an flutter application with a Convex Bottombar

Step 1 : Adding dependency

Step 2 : Importing dependency

Step 3 : Creating a App structure

Step 4 : Building the Bottombar

Complete Source Code (main.dart):

Similar Reads

Thank You!

What kind of Experience do you want to share?