Flutter - Custom BottomBar

Last Updated : 17 Jan, 2021

App Bar is one of the most popular things that we see in most of the apps. This App bar is used to show options such as a menu, profile, and settings to navigate to different screens. It is one of the most efficient ways to communicate with the app. In this article, we are going to see how to implement a Custom App Bar in the Flutter app.

Follow the steps to implement Custom App Bar in our app Flutter App:

Step 1: Navigate to main.dart() file and return Material App()

First, we have declared MyApp() in runApp in the main function. Then we have created StatelessWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App then declared the theme as primaryColorSwatch and given the color green. Then we have given our first screen of or slider app in the home: BottomBar()

Dart

import 'package:flutter/material.dart';
import 'package:todolistapp/CustomeBottomBar.dart';

void main() {
  runApp(MyApp());
}
// stateless widget for my class app
class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Geeks for Geeks',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),

    //first screen of app
    home: BottomBar(),
    );
  }
}
class BottomBar extends StatefulWidget {
  @override
  _BottomBarState createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  
  // given current index
  int currentIndex = 0;
   setBottomBarIndex(index){
     setState(() {
       currentIndex = index;
     });
   }
  
  // Tabs created to display text on each screen
   final tabs = [
     Center(child: Text("Home",style: TextStyle(color: Colors.white))),
     Center(child: Text("Cart",style: TextStyle(color: Colors.white))),
     Center(child: Text("Profile",style: TextStyle(color: Colors.white))),
     Center(child: Text("Folder",style: TextStyle(color: Colors.white))),
     Center(child: Text("Add Items",style: TextStyle(color: Colors.white))),
   ];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeks for Geeks"),
      ),
      backgroundColor: Colors.white10,
      body: tabs[currentIndex],

      // Floating action button
      floatingActionButton: FloatingActionButton(
        onPressed: (){

          // given index yo screen
             setBottomBarIndex(4);
        },
        child: Icon(Icons.add,color: Colors.white),
      ),

Step 2: Design the Bottom Navbar

Now we have declared BottomNavbar in which we have given color as white. After that, we have created a container of a specific height. In that container, we have given 4 IconButtons() wrapped in a Row() Widget. And given the main Axis Alignment. In the state class, we set the state where the current Index is equal to the index. Now to every Icon button we have declared different icons and declared onPressed method to each of them.

Dart

// Bottom Nav Bar
bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 80,
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              
              // Icon button 1
              IconButton(
                icon: Icon(Icons.home,
                  color: currentIndex == 0 ? Colors.green : Colors.grey,
                ),
                onPressed: (){
                  setBottomBarIndex(0);
                },
                splashColor: Colors.white,

              ),
              
              // Icon button 2
              IconButton(
                  icon: Icon(Icons.add_shopping_cart,
                    color: currentIndex == 1 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(1);
                  }),
              SizedBox.shrink(),
              
              // Icon button 3
              IconButton(
                  icon: Icon(Icons.person,
                    color: currentIndex == 2 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(2);
                  }),

              // Icon button 4
              IconButton(
                  icon: Icon(Icons.insert_drive_file,
                    color: currentIndex == 3 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(3);
                  }),
            ],
          ),
        ),
      ),

Complete Source Code:

Dart

import 'package:flutter/material.dart';
import 'package:todolistapp/CustomeBottomBar.dart';


void main() {
  runApp(MyApp());
}
// stateless widget
class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To Do List',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),

    // first screen of app
    home: BottomBar(),
    );
  }
}

Complete Source Code for First Screen:

Dart

import 'package:flutter/material.dart';
// Stateful widget created
class BottomBar extends StatefulWidget {
  @override
  _BottomBarState createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {

// index given for tabs
  int currentIndex = 0;
   setBottomBarIndex(index){
     setState(() {
       currentIndex = index;
     });
   }

   // Number of tabs
   final tabs = [
     Center(child: Text("Home",style: TextStyle(color: Colors.white))),
     Center(child: Text("Cart",style: TextStyle(color: Colors.white))),
     Center(child: Text("Profile",style: TextStyle(color: Colors.white))),
     Center(child: Text("Folder",style: TextStyle(color: Colors.white))),
     Center(child: Text("Add Items",style: TextStyle(color: Colors.white))),
   ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      // appbar given
      appBar: AppBar(
        title: Text("Geeks for Geeks"),
      ),
      backgroundColor: Colors.white10,
      body: tabs[currentIndex],
      
      // floating action button in center
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setBottomBarIndex(4);
        },
        child: Icon(Icons.add,color: Colors.white),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      
      // bottom app bar
      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 80,
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [

              // button 1
              IconButton(
                icon: Icon(Icons.home,
                  color: currentIndex == 0 ? Colors.green : Colors.grey,
                ),
                onPressed: (){
                 setBottomBarIndex(0);
                },
                splashColor: Colors.white,

              ),

              // button 2
              IconButton(
                  icon: Icon(Icons.add_shopping_cart,
                    color: currentIndex == 1 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(1);
                  }),
              SizedBox.shrink(),
              
              // button 3
              IconButton(
                  icon: Icon(Icons.person,
                    color: currentIndex == 2 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(2);
                  }),

              // button 4
              IconButton(
                  icon: Icon(Icons.insert_drive_file,
                    color: currentIndex == 3 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(3);
                  }),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

Flutter - Custom BottomBar

chinmaymunje96

Improve

Article Tags :

Flutter - Custom BottomBar

Step 1: Navigate to main.dart() file and return Material App()

Step 2: Design the Bottom Navbar

Complete Source Code:

Complete Source Code for First Screen:

Similar Reads

Thank You!

What kind of Experience do you want to share?