Custom Animated BottomNavigation Bar In Flutter
The bottom navigation bar is a cool widget that has been given by the flutter system. We can undoubtedly add the bottom navigation bar to the platform. In the framework, there is a characteristic called bottomNavigationBar and we can dole out BottomNavigationBar for that. Inside the BottomNavigationBar class we can characterize the navigation catch’s conduct and what are the catches need to show inside the bar.
In this blog, we will explore the Custom Animated BottomNavigation Bar In Flutter. We will see how to implement a demo program of the custom animated bottomnavigation bar and how to use it in your flutter applications.
Table Of Contents::
Introduction:
A material widget that is shown at the bottom of an application for choosing among few perspectives, ordinarily somewhere in the range of three and five. The bottom navigation bar comprises various items as text labels, icons, or both, spread out on top of a piece of material. It gives fast navigation between the high-level perspectives on an application. For bigger screens, side navigation might be a superior fit.
A bottom navigation bar is normally utilized related to a Scaffold, where it is given as the Scaffold.bottomNavigationBar contention.
Demo Module :
This demo video shows how to use a custom bottomNavigation bar in a flutter. It shows how the custom bottomnavigation bar will work in your flutter applications. It shows when the user taps on the bottom navigation bar icon, then they will be animated and show with label text also. When the user taps any icon the color was also changes and animated. It will be shown on your device.
Properties:
There are some properties of custom animated bottom navigation bar are:
- > selectedIndex: This property is used to the selected item is an index. Changing this property will change and animate the item being selected. Defaults to zero.
- > backgroundColor: This property is used to the background color of the navigation bar. It defaults to Theme.bottomAppBarColor if not provided.
- > showElevation: This property is used to whether this navigation bar should show an elevation. Defaults to true.
- > List<BottomNavyBarItem> items: This property is used to defines the appearance of the buttons that are displayed in the bottom navigation bar. This should have at least two items and five at most.
- > onItemSelected: This property is used callback that will be called when an item is pressed.
- > curve: This property is used to configure the animation curve.
- > itemCornerRadius: This property is used to the items corner radius, if not set, it defaults to 50.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called my_home_page.dart inside the lib folder.
In a build method, we will return a scaffold(). Inside we will add an appBar. In appBar, we will add title and backgroundColor. We will add body and add inside the getBody() widget. We will deeply define the code below. Now, we will add bottomNavigationBar and add it inside the _buildBottomBar() widget. We will also deeply define the code below.
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text("Custom Animated Bottom Navigation Bar"),
backgroundColor: Colors.green[200],
),
body: getBody(),
bottomNavigationBar: _buildBottomBar()
);
We will deeply define getBody() widget
First, we will create an integer variable _currentIndex is equal to zero.
int _currentIndex = 0;
We will create getBody() widget. In this widget, we will add List<Widget> pages. We will add four containers with different texts and return IndexedStack() widget. Inside the widget, we will add the index was my variable _currentIndex and children was list widget pages.
Widget getBody() {
List<Widget> pages = [
Container(
alignment: Alignment.center,
child: Text("Home",style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold),),
),
Container(
alignment: Alignment.center,
child: Text("Users",style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold),),
),
Container(
alignment: Alignment.center,
child: Text("Messages",style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold),),
),
Container(
alignment: Alignment.center,
child: Text("Settings",style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold),),
),
];
return IndexedStack(
index: _currentIndex,
children: pages,
);
}
We will deeply define _buildBottomBar() widget
First, we will create a final variable that was _inactiveColor is equal to the grey color.
final _inactiveColor = Colors.grey;
We will create a _buildBottomBar() widget. In this widget, we will return a CustomAnimatedBottomBar(). Inside, we will add a container height, backgroundColor, selectedIndex was added variable _currentIndex, showElevation, the curve of animation, onItemSelected and items. In items, e will add four BottomNavyBarItem(). Inside, we will add four different icons, titles, activeColors, and all text-align should be center.
Widget _buildBottomBar(){
return CustomAnimatedBottomBar(
containerHeight: 70,
backgroundColor: Colors.black,
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.green,
inactiveColor: _inactiveColor,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
icon: Icon(Icons.people),
title: Text('Users'),
activeColor: Colors.purpleAccent,
inactiveColor: _inactiveColor,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
icon: Icon(Icons.message),
title: Text(
'Messages ',
),
activeColor: Colors.pink,
inactiveColor: _inactiveColor,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
activeColor: Colors.blue,
inactiveColor: _inactiveColor,
textAlign: TextAlign.center,
),
],
);
}
Create a new dart file called custom_animated_bottom_bar.dart inside the lib folder.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class CustomAnimatedBottomBar extends StatelessWidget {
CustomAnimatedBottomBar({
Key? key,
this.selectedIndex = 0,
this.showElevation = true,
this.iconSize = 24,
this.backgroundColor,
this.itemCornerRadius = 50,
this.containerHeight = 56,
this.animationDuration = const Duration(milliseconds: 270),
this.mainAxisAlignment = MainAxisAlignment.spaceBetween,
required this.items,
required this.onItemSelected,
this.curve = Curves.linear,
}) : assert(items.length >= 2 && items.length <= 5),
super(key: key);
final int selectedIndex;
final double iconSize;
final Color? backgroundColor;
final bool showElevation;
final Duration animationDuration;
final List<BottomNavyBarItem> items;
final ValueChanged<int> onItemSelected;
final MainAxisAlignment mainAxisAlignment;
final double itemCornerRadius;
final double containerHeight;
final Curve curve;
@override
Widget build(BuildContext context) {
final bgColor = backgroundColor ?? Theme.of(context).bottomAppBarColor;
return Container(
decoration: BoxDecoration(
color: bgColor,
boxShadow: [
if (showElevation)
const BoxShadow(
color: Colors.black12,
blurRadius: 2,
),
],
),
child: SafeArea(
child: Container(
width: double.infinity,
height: containerHeight,
padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
child: Row(
mainAxisAlignment: mainAxisAlignment,
children: items.map((item) {
var index = items.indexOf(item);
return GestureDetector(
onTap: () => onItemSelected(index),
child: _ItemWidget(
item: item,
iconSize: iconSize,
isSelected: index == selectedIndex,
backgroundColor: bgColor,
itemCornerRadius: itemCornerRadius,
animationDuration: animationDuration,
curve: curve,
),
);
}).toList(),
),
),
),
);
}
}
class _ItemWidget extends StatelessWidget {
final double iconSize;
final bool isSelected;
final BottomNavyBarItem item;
final Color backgroundColor;
final double itemCornerRadius;
final Duration animationDuration;
final Curve curve;
const _ItemWidget({
Key? key,
required this.item,
required this.isSelected,
required this.backgroundColor,
required this.animationDuration,
required this.itemCornerRadius,
required this.iconSize,
this.curve = Curves.linear,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Semantics(
container: true,
selected: isSelected,
child: AnimatedContainer(
width: isSelected ? 130 : 50,
height: double.maxFinite,
duration: animationDuration,
curve: curve,
decoration: BoxDecoration(
color:
isSelected ? item.activeColor.withOpacity(0.2) : backgroundColor,
borderRadius: BorderRadius.circular(itemCornerRadius),
),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
physics: NeverScrollableScrollPhysics(),
child: Container(
width: isSelected ? 130 : 50,
padding: EdgeInsets.symmetric(horizontal: 8),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconTheme(
data: IconThemeData(
size: iconSize,
color: isSelected
? item.activeColor.withOpacity(1)
: item.inactiveColor == null
? item.activeColor
: item.inactiveColor,
),
child: item.icon,
),
if (isSelected)
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 4),
child: DefaultTextStyle.merge(
style: TextStyle(
color: item.activeColor,
fontWeight: FontWeight.bold,
),
maxLines: 1,
textAlign: item.textAlign,
child: item.title,
),
),
),
],
),
),
),
),
);
}
}
class BottomNavyBarItem {
BottomNavyBarItem({
required this.icon,
required this.title,
this.activeColor = Colors.blue,
this.textAlign,
this.inactiveColor,
});
final Widget icon;
final Widget title;
final Color activeColor;
final Color? inactiveColor;
final TextAlign? textAlign;
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
Conclusion:
In the article, I have explained the basic structure of the Custom Animated BottomNavigation Bar in a flutter; you can modify this code according to your choice. This was a small introduction to Custom Animated BottomNavigation Bar On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Custom Animated BottomNavigation Bar in your flutter projects. We will show you what the Introduction is?, some properties and make a demo program for working Custom Animated BottomNavigation Bar and show when the user taps on the bottom navigation bar icon, then they will be animated and show with label text also. When the user taps any icon the color was also changed and animated in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
