How to implement Modern Bottom Navigation Bar into Flutter

Welcome back to another quick flutter tutorial. In this one, we are going to show you costume Bottom Navigation Bar to make your app look a little bit more static this one is called a Google Navbar and we give the link to click so you guys can take a close look if you like but I can show you quickly right now how to uses into apps because is quite easy to do. So don’t waste your time go to the coding part step by step.

Step 1: First import google_nav_bar 5.0.6 Package into you project

Open your pupspec.yaml file then put this dependency and hit Pub get button

dependencies:
  google_nav_bar: ^5.0.6

Step 2: Add this Simple code to your File and the output is down below

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

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

  @override
  State<GoogleNavBarPage> createState() => _GoogleNavBarPageState();
}

class _GoogleNavBarPageState extends State<GoogleNavBarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google NavBar'),
        centerTitle: true,
      ),
      body: Center(
        child: Text('Home Page'),
      ),
      bottomNavigationBar: GNav(
        gap: 8,
        tabs: const [
          GButton(icon: Icons.home,text: 'Home',),
          GButton(icon: Icons.favorite_border,text: 'Likes',),
          GButton(icon: Icons.search,text: 'Search',),
          GButton(icon: Icons.settings,text: 'Setting',),
        ],
      ),
    );
  }
}

Output

If you want Modern Bottom Navigation Bar then

if you want some interesting and attractive UI to attract users to your App so you implement this code into your project

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

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

  @override
  State<GoogleNavBarPage> createState() => _GoogleNavBarPageState();
}

class _GoogleNavBarPageState extends State<GoogleNavBarPage> {

  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 20, fontWeight: FontWeight.w500);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Home',
      style: optionStyle,
    ),
    Text(
      'Likes',
      style: optionStyle,
    ),
    Text(
      'Search',
      style: optionStyle,
    ),
    Text(
      'Setting',
      style: optionStyle,
    ),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google NavBar'),
        centerTitle: true,
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: Container(
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0,vertical: 15.0),
          child: GNav(
            backgroundColor: Colors.white,
            color: Colors.black,
            activeColor: Colors.white,
            tabBackgroundColor: Colors.blue,
            gap: 8,
            padding: EdgeInsets.all(16),
           duration: Duration(milliseconds: 1000),
           iconSize: 25,

            tabs: const [
              GButton(icon: Icons.home,text: 'Home',),
              GButton(icon: Icons.favorite_border,text: 'Likes',),
              GButton(icon: Icons.search,text: 'Search',),
              GButton(icon: Icons.settings,text: 'Setting',),
            ],
            selectedIndex: _selectedIndex,
            onTabChange: (index){
              setState(() {
                _selectedIndex = index;
              });
            },
          ),
        ),
      ),
    );
  }
}

Output

So I think you learn and understand how to create and implement Google NavigationBar. Cool, that’s it for this one let me know if you have any problem with this and I am happy to come around and answer your questions thank’s for reading this article and I catch you guys in the next tutorials. if you like our article then you also read these amazing articles; How to implement a Foldable Navigation Sidebar on Flutter, How to implement Pattern lock screen into Flutter, and How to Create a Bottom Navigation Bar on Flutter App.