Open In App

Flutter - Convex Bottombar

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
1 Likes
Like
Report

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:


D

ddeevviissaavviittaa
Improve
Article Tags :

Explore

Lightbox