In this Tutorial, we will explain how to create a beautiful Nav Bar using Flutter with the google_nav_bar Plugin.

1. google_nav_bar Plugin Installation

... 

dependencies: 

 google_nav_bar: ^5.0.6

Now, in your Dart code, you can use:

import 'package:google_nav_bar/google_nav_bar.dart'; 

2. Example of Usage

In this section, we will create an example of using this plugin.

Create a Stateful widget to contain your navigation bar

class GoogleNavBar extends StatefulWidget{
  @override
  State<GoogleNavBar> createState() => _GoogleNavBarState();
}

class _GoogleNavBarState extends State<GoogleNavBar> {
  int _selectedIndex = 0 ;

  _onTap(index){
    setState(() {
      _selectedIndex = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: Container(
        color: Colors.black,
        child:Padding(
          padding: EdgeInsets.symmetric(vertical: 15.0 , horizontal: 20.0),
          child:  GNav(
          gap: 8,
          tabBackgroundColor: Colors.grey.shade900,
          activeColor: Colors.white,
          color: Colors.grey,
          backgroundColor: Colors.black54,
          tabs: [
          GButton(icon: Icons.home  , text: "home") ,
          GButton(icon: Icons.favorite_border , text : "favorite" ) ,
          GButton(icon: Icons.search , text: "search"),
          GButton(icon: Icons.person , text:"profile")
          ],
          selectedIndex: _selectedIndex,
          onTabChange: _onTap

          ),
          ),
      ),
    );
  }

}

Then use GoogleNavBar in your application:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoogleNavBar(),
    );
        }
}