Navigation bars are one of the most useful and interactive features in any application. By default, Flutter allows incorporating a simple bottom navigation bar. However, if you want to make your app more interactive and give it a modern and polished look, you can create an animated navigation bar in your Flutter app.
To add an animated navigation bar in your Flutter app, start by importing the necessary dart packages in your pubspec.yaml file under the dependencies section.
This can be done in the following manner:
dependencies:flutter:sdk: flutteranimated_bottom_navigation_bar: ^1.2.0
After adding this dependency to your pubspec.yaml file, run the get command to import all your packages.
$ flutter pub get
Running this command in your terminal will import all the listed packages, and through this, all the imported functionalities can be used within your app.
Remember that the version of the dart package can be updated over time, so try to import the latest package by checking through the documentation.
You can check the latest version of this package here.
The main.dart file is the starting point of any Flutter application. We will call our animated navigation bar widget through this file in the following manner.
import 'package:flutter/material.dart';import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';import 'AnimatedBar.dart';void main() {runApp(AnimatedNavigationBarApp());}class AnimatedNavigationBarApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Animated Navigation Bar',theme: ThemeData(primarySwatch: Colors.blueGrey,),home: AnimatedNavigationBarScreen(),);}}
The AnimatedNavigationBarApp is in our main.dart file is a stateless widget that calls our AnimatedNavigationBarScreen(), which in turn contains the animated navigation bar.
AnimatedBottomNavigationBar widget The animated_bottom_navigation_bar: ^1.2.0 package we imported earlier in our pubspec.yaml file incorporates the AnimatedBottomNavigationBar widget, which houses a variety of animations and attributes that can be specified to make your navigation bar more attractive.
These attributes include:
activeIndex: This property is used to specify the index of the currently selected navigation item.
activeColor: This property sets the color for the active navigation item.
gapLocation: This property determines the location of the gap between the navigation items.
notchSmoothness: This property controls the smoothness of the notch between the active and inactive items in the navigation bar.
leftCornerRadius: This property sets the left corner radius of the navigation bar.
rightCornerRadius: This property sets the right corner radius of the navigation bar.
splashColor: This property sets the color of the splash effect when tapping on an inactive navigation item.
inactiveColor: This property sets the color for the inactive navigation items.
AnimatedBottomNavigationBar in your Flutter appNow that we have understood the functionality of the AnimatedBottomNavigationBar, let's go ahead and add it to our Flutter app.
import 'package:flutter/material.dart';
import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';
class AnimatedNavigationBarScreen extends StatefulWidget {
@override
_AnimatedNavigationBarScreenState createState() =>
_AnimatedNavigationBarScreenState();
}
class _AnimatedNavigationBarScreenState
extends State<AnimatedNavigationBarScreen> {
int _currentIndex = 0;
List<IconData>iconlist=[Icons.home, Icons.search, Icons.favorite, Icons.person];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Navigation Bar'),
),
body: _buildBody(),
bottomNavigationBar: _buildBottomNavigationBar(),
);
}
Widget _buildBody() {
// Replace this with your main content for each navigation item.
// For simplicity, we'll display some text representing the current page.
return Center(
child: Icon(
iconlist[_currentIndex],
color: Colors.indigo,
size: 40
),
);
}
Widget _buildBottomNavigationBar() {
return AnimatedBottomNavigationBar(
backgroundColor: Colors.indigo,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
icons: [Icons.home, Icons.search, Icons.favorite, Icons.person],
activeIndex: _currentIndex,
activeColor: Colors.yellow,
gapLocation: GapLocation.center,
splashRadius: 40,
leftCornerRadius: 100,
rightCornerRadius: 100,
splashColor: const Color.fromARGB(255, 255, 236, 68),
inactiveColor: Colors.grey,
elevation: 10,
iconSize: 35,
);
}
}
We define our animated navigation bar in the AnimatedNavigationBarScreen widget of our app, which extends a stateful widget.
Lines 10–13: We define the _AnimatedNavigationBarScreenState class, which extends the State class and is associated with the AnimatedNavigationBarScreen widget. Here, we declare a private variable _currentIndex initialized to 0. This variable will hold the index of the currently selected navigation item. We also create a List called the iconlist, which contains the IconData representing the icons we want to display in the navigation bar.
Lines 16–24: In the build method, we create the main screen layout using the Scaffold widget. The Scaffold widget provides a framework to implement the basic material design visual layout structure. It includes an AppBar at the top and a BottomNavigationBar at the bottom.
Lines 26–36: The _buildBody() method returns a Center widget containing an Icon. This widget displays the icon from the iconlist at the index _currentIndex. The color of the icon is set to Colors.indigo, and its size is set to 40.
Lines 38–60: The _buildBottomNavigationBar() method returns the AnimatedBottomNavigationBar widget, which displays the animated navigation bar at the bottom of the screen. This navigation bar is fully customizable with various properties like the activeColor, inactiveColor, elevation, iconSize, gapLocation, etc.
The onTap callback is provided, which updates the _currentIndex when the user taps on a navigation item, changing the displayed icon in the body accordingly.
Free Resources