Flutter – Animated Bottom Navigation Bar

The Animated Bottom Bar widget provides extra links to navigate between different views. When an item is tapped, the onItemSelected callback is invoked with an index of the tapped item. Depending on the number of items, there can be different ways to show these items. The layout of items is defined by values of the BottomNavigationBarType enum or list. 

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: Add the Dependency in the pubspec.yaml File.

You can add the dependency from the bash or copy-paste the plugin.

From Bash: Run this command

flutter pub add animated_bottom_navigation_bar

This will add the following code into the pubspec.yaml file just like this.

dependencies:
    animated_bottom_navigation_bar: ^1.0.1

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

Import the Package into the main file.

import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';

Step 3: Using the Animated Navigation Bar

In the body of the scaffold, Use the AnimatedNavigationBar Widget and gives it properties such as icons, activeindex, background color, border radius, etc.

Dart

MaterialApp( //material app with debugshowcheckedmodebanner false
     debugShowCheckedModeBanner: false,
     home: Scaffold(  //scaffold
       body: Container(),
       floatingActionButton: FloatingActionButton(

           child: Icon(Icons.home_max_outlined),
           onPressed: () {}),
       floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
       bottomNavigationBar: AnimatedBottomNavigationBar( //navigation bar
         icons: iconList, //list of icons
         activeIndex: _bottomNavIndex,
         gapLocation: GapLocation.center,
         notchSmoothness: NotchSmoothness.verySmoothEdge,
         onTap: (index) => setState(() => _bottomNavIndex = index),
         backgroundColor: Colors.blue,

       ),
     ),
   );

Step 4: Creating the List of Icons

At last, create the list of icons that are required by the icon property of the animated navigation bar.

Dart

// list of icons that required
// by animated navigation bar
List<IconData> iconList = [
    Icons.abc_sharp,
    Icons.access_time,
    Icons.holiday_village,
    Icons.account_tree_rounded
  ];

Code Example

Dart

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

// main app that calls the runApp.
void main() {
  runApp(AnimatedBottomBar());
}

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

  @override
  State<AnimatedBottomBar> createState() => _AnimatedBottomBarState();
}

class _AnimatedBottomBarState extends State<AnimatedBottomBar> {
  // list of icons that required
  // by animated navigation bar
  List<IconData> iconList = [
    Icons.abc_sharp,
    Icons.access_time,
    Icons.holiday_village,
    Icons.account_tree_rounded
  ];

  // default index of the tabs
  int _bottomNavIndex = 0;
  @override
  Widget build(BuildContext context) {
    // material app with
    // debugshowcheckedmodebanner false
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(),
        floatingActionButton: FloatingActionButton(

            child: Icon(Icons.home_max_outlined),
            onPressed: () {}),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: AnimatedBottomNavigationBar( // navigation bar
          icons: iconList,
          activeIndex: _bottomNavIndex,
          gapLocation: GapLocation.center,
          notchMargin: 8 // Default notch margin is 8
          notchSmoothness: NotchSmoothness.verySmoothEdge,
          onTap: (index) => setState(() => _bottomNavIndex = index),
          backgroundColor: Colors.blue,
        ),
      ),
    );
  }
}

Code Explanation

• main is the principle method that runs the runApp and calls to our class AnimatedBottomBar.
• MaterialApp allows us to create scaffold.
• In the bottom bar we have an AnimatedBottomNavigationBar that allows us to create an animated bottom bar.
• AnimatedBottomNavigationBar takes some properties like icons list, activeIndex, gaplocation, background color, ontap.
• Icon list is the required property, so we have created a list of icons iconList.

Output UI

ui

Output Video