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
Animated Background in Flutter
Animated Backgrounds for Flutter is easily extended to paint whatever you want on the canvas. In this article, we are going to make an animated background with bubbles. A sample video is given below to get an idea about what we are going to do in this article. [video mp4="https://media.geeksforgeeks
2 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 - Animate Image Rotation
In Flutter, Image.assets() or Image.network() Widget is used to display images from locally or from the URL. Images can be locally stored in the program or fetched from a network and can be displayed using the Image Widget. Animations can be applied to Images via many techniques. Hence In this artic
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 sho
3 min read
Flutter - Spin Bottle Animation
In Flutter, Spin Bottle Animation is a fun and attractive animation, here we can achieve this by using the Flutter RotationTransition and AnimatedBuilder widget, In this animation, a bottle is rotated when we press a button. In this article, we are going to implement the Spin Bottle Animation using
5 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
Flutter - Page Transition Animation
In Flutter, we can easily animate or handle the page transitions by using the page_transition package. The page_transition package is a valuable addition to the Flutter package, offering a variety of transition effects that can elevate the app's UI. In this article, we are going to explore how to in
6 min read