Flutter - Animated Bottom Navigation Bar
Last Updated :
23 Jul, 2025
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:
Similar Reads
Flutter - Animated Navigation By default, Flutter has no animation when navigating from one Screen to another. But in this tutorial, we are going to learn how to animate the Screen Transition.Project SetupBefore directly applying to your existing project, practice the code in some example projects. For this tutorial, we are goin
3 min read
Flutter - Custom Bottom Navigation Bar A bottom navigation bar is a material widget that is present at the bottom of an app for selecting or navigating to different pages of the app. It is usually used in conjunction with a Scaffold, where it is provided as the Scaffold.bottomNavigationBar argument. Though Flutter provides you with the B
9 min read
Flutter - Navigation Drawer The mobile applications that use Material Designs have two primary options for navigation. These are namely the 'Tabs' and the 'Drawers'. This article will primarily focus on Drawers. A drawer is used to provide access to different destinations and functionalities provided in your application. It is
4 min read
Flutter - Water Drop Navigation Bar BottomNavigationBar widget provides extra links to navigate between different views. When an item is tapped, the onTap 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. In the Waterdrop Bottom navigation bar, it h
4 min read
Flutter - Hidden Bottom AppBar Bottom AppBar or Bottom Navigation Bar is mostly used in every Android IOS Application, Bottom Navigation Bar is an AppBar containing Tabs which is used to show more pages on a single screen. We are going to Hide the bottom App Bar on scroll down and show it in scroll up. Â What will we do?We will s
3 min read
Flutter - AnimatedPositioned Widget The AnimatedPositioned widget in Flutter is used to create animated transitions for a widget's position within a Stack. It allows you to smoothly change the position of a child widget by animating the values of the left, top, right, and bottom properties. In this article, we are going to implement t
4 min read