How to Implement Fancy Bottom NavigationBar in Flutter?

Last Updated : 14 Apr, 2023

Fancy Bottom NavigationBar is a MaterialApp widget that displays a bottom fancy navbar, Where items go between 2 and 4. Bottom NavigationBar is the list of icons or text in the horizontal form called a tab and Each tab contains their own page.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package in the pubspec.yaml File.

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.

From the command line:

flutter pub add fancy_bottom_navigation

This will add something like that to your pubspec.yaml file:

Dart

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  fancy_bottom_navigation: ^0.3.3

Don’t forget to get the packages.

Note: when you are adding the dependency, version of plugin may changed.

Step 3: Import the Plugin into the main.dart file

import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart';

Some key points of fancy bottom NavigationBar:

TabData:

Take iconData That Display The Icon
title Text To Be Shown
onClick Action To do some task When Clicked.

initialSelection:

Active PageIndex On Start

circleColor:

Set The Background Of The Circle Globbing The Icon.

inactivelconColor:

Set The Background Of Non-Selected Circle Globbing The Icon.

barBackgroundColor:

Set The BackgroundColor Of The Main Bar

Syntax:

Creating PageIndex To Be Shown Var:

int currentPage = 0;

Creating StateKey Var:

GlobalKey bottom NavigationKey = GlobalKey();

Creating a Fancy BottomNavigationBar:

Dart

Scaffold(
    bottomNavigationBar:FancyBottomNavigation(
        initialSelection:0, key: bottomNavigationKey, circleColor:Colors.teal,
        inactiveIconColor:Colors.white, barBackgroundColor:Colors.lightBlueAccent,
        tabs: [
            TabData(
                iconData: Icons.add,
                title: 'Add',
                onclick: 00
            ), //You Can Add More
        ]
        onTabChangedListener:(indexPage) {
            setState() ({
                currentPage = indexPage;
            });
        },
    ),
)

Code:

Dart

import 'package:flutter/material.dart';
import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart';
 
void main() => runApp(MaterialApp(home: FancyBottomNavBarRun() ,));
 
class FancyBottomNavBarRun extends StatefulWidget {
  const FancyBottomNavBarRun({Key? key}) : super(key: key);
 
  @override
  _FancyBottomNavBarState createState() => _FancyBottomNavBarState();
}
 
class _FancyBottomNavBarState extends State<FancyBottomNavBarRun> {
  int currentPage = 0;
  // CurrentPage that hold the current tab value
  GlobalKey bottomNavigationKey = GlobalKey();
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // MaterialApp with debugShowCheckedModeBanner false,
      debugShowCheckedModeBanner:false,
      home:Scaffold(
        appBar: AppBar(
          title: const Text("Fancy Bottom Navigation"),
        ),
        body:Container(
          width:MediaQuery.of(context).size.width,
          height:MediaQuery.of(context).size.height,
          child: // Showing the body according to the currentPage index.
           (currentPage ==0 )?
             AddPage():
           (currentPage ==1 )?
             ListPage():
             ComparePage(),
        ),
        // NavigationBar which have three tab, each tab have icons and color
        bottomNavigationBar: FancyBottomNavigation(
          initialSelection:0,
          key: bottomNavigationKey,
          circleColor:Colors.teal,
          inactiveIconColor:Colors.white,
          barBackgroundColor:Colors.lightBlueAccent,
          tabs: [
            TabData(
                iconData: Icons.add,
                title: "Add",
                onclick: () {}
            ),
            TabData(
                iconData: Icons.list,
                title: "List",
                onclick: () {}
            ),
            TabData(
                iconData: Icons.compare_arrows,
                title: "Compare",
                onclick: () {}
            ),
          ],
          // When tab changes we also called the setState method to change the currentpage
          onTabChangedListener: (indexPage) {
            setState(() {
              currentPage = indexPage;
            });
          },
        ),
      ),
    );
  }
}
 
// Classes for showing in the body of the app according to the current page index.
class AddPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment:MainAxisAlignment.center,
      crossAxisAlignment:CrossAxisAlignment.center,
      children: [
        const Icon(Icons.add, size: 30),
        const Text("Add Page")
      ],
    );
  }
}
 
class ListPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment:MainAxisAlignment.center,
      crossAxisAlignment:CrossAxisAlignment.center,
      children: [
        const Icon(Icons.list, size: 30),
        const Text("List Page")
      ],
    );
  }
}
 
class ComparePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment:MainAxisAlignment.center,
      crossAxisAlignment:CrossAxisAlignment.center,
      children: [
        const Icon(Icons.compare_arrows, size: 30),
        const Text("Compare Page")
      ],
    );
  }
}

Output UI:

How to Implement Adaptive and Responsive NavBar in Flutter?

ms471841

Improve

Article Tags :

How to Implement Fancy Bottom NavigationBar in Flutter?

Step By Step Implementation

Step 1: Create a New Project in Android Studio

Step 2: Import the Package in the pubspec.yaml File.

From the command line:

Dart

Step 3: Import the Plugin into the main.dart file

Some key points of fancy bottom NavigationBar:

Syntax:

Dart

Code:

Dart

Output UI:

Similar Reads

Thank You!

What kind of Experience do you want to share?