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:

Suggest improvement

Flutter - Fetching Data From the Internet

Flutter - Implementing Calendar

Share your thoughts in the comments

Flutter – Custom BottomBar

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

Dart

Step 2: Design the Bottom Navbar

Dart

Complete Source Code:

Dart

Complete Source Code for First Screen:

Dart

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?