Hello guys, In this blog, you will learn How to create an animated bottom navigation bar in a flutter. To create an animated bottom navigation bar we need a package called bottom_navy_bar. This package helps us to create a stylish animated bottom navigation bar. Let’s get started.
[rb_related title=”You May Also Like” total=”2″ style=”light” ids=”7016,7002″]
Project Setup
First, create an empty project by using IDE or if you are using Text Editors like Sublime or Visual Studio Code, use the flutter create command. If you are using an existing project no problem, use that project.
Adding Package
To create an animated bottom navigation bar we need a bottom_navy_bar package.
Open the pubspec.yaml file and add the bottom_navy_bar package under the dependencies section. To get the latest version, visit the official page https://pub.dev/packages/bottom_navy_bar.
Implementation
Create the bottom navigation bar widget under your home screen scaffold widget. The bottom navigation bar code is given below.
bottomNavigationBar: BottomNavyBar(
selectedIndex: _selectedIndex,
showElevation: true,
onItemSelected: (index) => setState(() {
_selectedIndex = index;
_pageController.animateToPage(index,
duration: Duration(milliseconds: 300), curve: Curves.ease);
}),
items: [
BottomNavyBarItem(
icon: Icon(Icons.apps),
title: Text('Home'),
activeColor: Colors.red,
),
BottomNavyBarItem(
icon: Icon(Icons.people),
title: Text('Users'),
activeColor: Colors.purpleAccent
),
BottomNavyBarItem(
icon: Icon(Icons.message),
title: Text('Messages'),
activeColor: Colors.pink
),
BottomNavyBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
activeColor: Colors.blue
),
],
)
By default, the bottom navigation bar elevation is true, if you don’t need elevation set showElevation as false.
The full main.dart code is given below.
import 'package:bottom_navy_bar/bottom_navy_bar.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
List _screens=[HomePage(),UsersPage(),MessagesPage(),SettingsPage()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flutter Demo")),
body: _screens[_currentIndex],
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
bottomNavigationBar: BottomNavyBar(
selectedIndex: _currentIndex,
showElevation: true,
itemCornerRadius: 24,
curve: Curves.easeIn,
onItemSelected: (index) => setState(() => _currentIndex = index),
items: <BottomNavyBarItem>[
BottomNavyBarItem(
icon: Icon(Icons.apps),
title: Text('Home'),
activeColor: Colors.red,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
icon: Icon(Icons.people),
title: Text('Users'),
activeColor: Colors.purpleAccent,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
icon: Icon(Icons.message),
title: Text(
'Messages test for mes teset test test ',
),
activeColor: Colors.pink,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
activeColor: Colors.blue,
textAlign: TextAlign.center,
),
],
),
);
}
}
Output

Nice library, if we could add every kind of widget as childs that would be perfect.