Convex Bottom Navigation Bar in Flutter

Vandana Sharma

27 April 2023

In this blog, we will explore about Implementation of Convex Bottom bar in flutter.

A Convex Bottom bar 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 blog, we will build a simple app with one of the simplest form of Convex bottom navigation bar.

To build an application with bottom navigation bar, you need to follow the steps given below.

so, without wasting time let’s start the implementation.

Check out more about our Flutter app development.

Step1 :- Add the dependency.

Add the following dependencies in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  convex_bottom_bar: ^3.0.0

dependencies:

flutter:

sdk: flutter

cupertino_icons: ^1.0.2

convex_bottom_bar: ^3.0.0

After adding dependencies run the pub get command.

Step2 :- Code Implementation

First, we need to create a stateful class with the name MyHomePage().

In this class we will create a variable selectedPage type of integer pass with the value zero. and also make a list with the name _pageNo, in which we will pass all the pages which we want to add in bottom navigation bar.

int selectedPage =0;
final _pageNo = [Home() , Favorite() , ProductPage() ];

1 2	int selectedPage =0; final _pageNo = [Home() , Favorite() , ProductPage() ];

After this,In the body , we will pass the _pageNo with the value of selectedPage. Using the property of scaffold we use bottomNavigationBar. In this, we will create ConvexAppBar() and pass Items, initialActiveIndex and onTap.

In Items, we will pass all the screens which we want to show in our application. And in initialActiveIndex we will pass the variable selectedPage which we already define and in onTap we pass index and define setState().

In the setState we pass selectedPage equal to index.

body: _pageNo[selectedPage],
bottomNavigationBar: ConvexAppBar(
  items: [
    TabItem(icon: Icons.home, title: 'Home'),
    TabItem(icon: Icons.favorite, title: 'Favorite'),
    TabItem(icon: Icons.shopping_cart, title: 'Cart'),
    TabItem(icon: Icons.person, title: 'Profile'),
  ],
  initialActiveIndex: selectedpage,
  onTap: (int index){
      setState(() {
        selectedpage = index;
      });
  },
),

body: _pageNo[selectedPage],

bottomNavigationBar: ConvexAppBar(

items: [

TabItem(icon: Icons.home, title: 'Home'),

TabItem(icon: Icons.favorite, title: 'Favorite'),

TabItem(icon: Icons.shopping_cart, title: 'Cart'),

TabItem(icon: Icons.person, title: 'Profile'),

initialActiveIndex: selectedpage,

onTap: (int index){

setState(() {

selectedpage = index;

});

Step3 :- Create bottom navigation bar screens.

i) Home Screen:

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

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Home Page',
          style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold
          ),),
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

class Home extends StatefulWidget {

const Home({Key? key}) : super(key: key);

@override

_HomeState createState() => _HomeState();

}

class _HomeState extends State<Home> {

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Text('Home Page',

style: TextStyle(

fontSize: 20,

fontWeight: FontWeight.bold

),),

);

}

ii) Favorite Screen:

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

class Favorite extends StatefulWidget {
  const Favorite({Key? key}) : super(key: key);

  @override
  _FavoriteState createState() => _FavoriteState();
}

class _FavoriteState extends State<Favorite> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.greenAccent,
     body: Center(
          child: Text('Favorite Page',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold
          ),
          )),
    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

class Favorite extends StatefulWidget {

const Favorite({Key? key}) : super(key: key);

@override

_FavoriteState createState() => _FavoriteState();

}

class _FavoriteState extends State<Favorite> {

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.greenAccent,

body: Center(

child: Text('Favorite Page',

style: TextStyle(

fontSize: 20,

fontWeight: FontWeight.bold

)),

);

}

iii) Product screen

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

class ProductPage extends StatefulWidget {
  const ProductPage({Key? key}) : super(key: key);

  @override
  _ProductPageState createState() => _ProductPageState();
}

class _ProductPageState extends State<ProductPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink.shade100,
      body: Center(
          child: Text('Product Page',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold
            ),)),
    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

class ProductPage extends StatefulWidget {

const ProductPage({Key? key}) : super(key: key);

@override

_ProductPageState createState() => _ProductPageState();

}

class _ProductPageState extends State<ProductPage> {

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.pink.shade100,

body: Center(

child: Text('Product Page',

style: TextStyle(

fontSize: 20,

fontWeight: FontWeight.bold

),)),

);

}

Step4 :- Check the Output

Now the implementation of all the screens has been done. It’s time to check the output.

https://mobikul.com/wp-content/uploads/2022/07/webmNavigationbar.mp4?_=1

you can check the out in the above video.We have a flutter application with convex bottom navigation bar.

Congratulations!!!! you have learned Implementation of Convex Bottom Navigation bar in flutter.

For more details and methods you can refer to the official doc of flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you with a better understanding in Implementation of Convex Bottom Navigation bar in flutter.

Thanks for reading.😇