Flutter – Animated Bottom Navigation Bar
The Animated Bottom 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, there can be different ways to show these items. The layout of items is defined by values of the BottomNavigationBarType enum or list.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Add the Dependency in the pubspec.yaml File.
You can add the dependency from the bash or copy-paste the plugin.
From Bash: Run this command
flutter pub add animated_bottom_navigation_bar
This will add the following code into the pubspec.yaml file just like this.
dependencies:
animated_bottom_navigation_bar: ^1.0.1
Note: When you are adding the dependency, version of plugin may changed.
Import the Package into the main file.
import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';
Step 3: 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
MaterialApp( //material app with debugshowcheckedmodebanner false debugShowCheckedModeBanner: false , home: Scaffold( //scaffold body: Container(), floatingActionButton: FloatingActionButton( child: Icon(Icons.home_max_outlined), onPressed: () {}), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar: AnimatedBottomNavigationBar( //navigation bar icons: iconList, //list of icons activeIndex: _bottomNavIndex, gapLocation: GapLocation.center, notchSmoothness: NotchSmoothness.verySmoothEdge, onTap: (index) => setState(() => _bottomNavIndex = index), backgroundColor: Colors.blue, ), ), ); |
Step 4: Creating the List of Icons
At last, create the list of icons that are required by the icon property of the animated navigation bar.
Dart
// list of icons that required // by animated navigation bar List<IconData> iconList = [ Icons.abc_sharp, Icons.access_time, Icons.holiday_village, Icons.account_tree_rounded ]; |
Code Example
Dart
import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart' ; import 'package:flutter/material.dart' ; // main app that calls the runApp. void main() { runApp(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.abc_sharp, Icons.access_time, Icons.holiday_village, Icons.account_tree_rounded ]; // default index of the tabs int _bottomNavIndex = 0; @override Widget build(BuildContext context) { // material app with // debugshowcheckedmodebanner false return MaterialApp( debugShowCheckedModeBanner: false , home: Scaffold( body: Container(), floatingActionButton: FloatingActionButton( child: Icon(Icons.home_max_outlined), 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.blue, ), ), ); } } |
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.