Open In App

Flutter - Animated Bottom Navigation Bar

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The Animated Bottom Navigation 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, these items can be shown differently. The layout of items is defined by values of the BottomNavigationBarType enum or list. 

Step By Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add  animated_bottom_navigation_bar as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart 
dependencies:
     flutter:
       sdk: flutter
     animated_bottom_navigation_bar: ^1.4.0


Now run the below command in the terminal.

flutter pub get

Or

Run the below command in the terminal.

flutter pub add animated_bottom_navigation_bar


Step 3 : Import dependencies

To use libraries, import all of them in the respective .dart file,

import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';

Step 4: Initialize variables

Initialize the required variables in the _AnimatedBottomBarState class.

Dart 
 // list of icons that required
// by animated navigation bar
List<IconData> iconList = [
    Icons.home,
    Icons.search,
    Icons.favorite,
    Icons.person
];

// Text inside the body of the app
// that will be changed when the  
// bottom navigation bar is tapped
List<String> BodyText = [
    "Home Page",
    "Search Page",
    "Favorite Page",
    "Profile Page"
];
// default index of the tabs
int _bottomNavIndex = 0;


Step 4: 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 
Scaffold(
  appBar: AppBar(
    title: Text("GFG Animated Bottom Bar"),
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
  ),
  body: Center(
      child: Text(
    BodyText[_bottomNavIndex],
    style: TextStyle(
      fontSize: 30,
      fontWeight: FontWeight.bold,
      color: Colors.green,
    ),
  )),
  floatingActionButton: FloatingActionButton(
      shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(70.0)),
      backgroundColor: Colors.green,
      foregroundColor: Colors.white,
      child: Icon(Icons.add),
      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.green,
    activeColor: Colors.white, // Set active icon color to white
    inactiveColor: Colors.white, // Set inactive icon color to white
  ),
);


Complete Source Code:

main.dart:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: 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.home,
    Icons.search,
    Icons.favorite,
    Icons.person
  ];
  List<String> BodyText = [
    "Home Page",
    "Search Page",
    "Favorite Page",
    "Profile Page"
  ];
  // default index of the tabs
  int _bottomNavIndex = 0;
  @override
  Widget build(BuildContext context) {
    // material app with
    // debugshowcheckedmodebanner false
    return Scaffold(
      appBar: AppBar(
        title: Text("GFG Animated Bottom Bar"),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
          child: Text(
        BodyText[_bottomNavIndex],
        style: TextStyle(
          fontSize: 30,
          fontWeight: FontWeight.bold,
          color: Colors.green,
        ),
      )),
      floatingActionButton: FloatingActionButton(
          shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(70.0)),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
          child: Icon(Icons.add),
          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.green,
        activeColor: Colors.white, // Set active icon color to white
        inactiveColor: Colors.white, // Set inactive icon color to white
      ),
    );
  }
}


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:



M
ms471841
Improve
Article Tags :

Explore

Lightbox