Flutter - Animated Bottom Navigation Bar
Last Updated :
18 Apr, 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 Screen. But in this tutorial, we are going to learn how to animate the Screen Transition. Project Setup Before directly applying to your existing project, practice the code in some example projects. For this tutorial, we
4 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
Bottom Navigation Bar in Android We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc. In this article, let's learn how to implement such a functional Bottom Navigation Bar in the Android app. Why do we need a Bottom Navigation Bar? It allows the user to switch to di
6 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