Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development toolkit (SDK) that comes complete with widgets and tools. Flutter is a free and open-source tool to develop mobile, desktop, web applications. Flutter is a cross-platform development tool. This means that with the same code, we can create both ios and android apps. This is the best way to save time and resources in our entire process. In this, hot reload is gaining traction among mobile developers. Allows us to quickly see the changes implemented in the code with hot reload.
In this article, we will explore the Explore Motion Bottom TabBar In Flutter using the motion_tab_bar_package. With the help of the package, Users can use this to give the bottom bar an animation type of tab bar motion on click of item. So let’s get started.
motion_tab_bar | Flutter Package
A beautiful animated widget for your Flutter apps |———|———-| | | Add the plugin: dependencies…pub.dev
Table Of Contents :
Motion Bottom TabBar :
The Motion Tab Bar Plugin in Flutter provides us with a motion animation, this is a kind of bottom tab bar, when we tap on the item in the tab bar, we see that it animates to the next item in the upward motion flow. It can be used instead of the bottom tab bar, it is very good and an attractive bottom tab bar.
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
dependencies:
motion_tab_bar: ^0.1.5Step 2: Importing
import 'package:motion_tab_bar/MotionTabBarView.dart';
import 'package:motion_tab_bar/MotionTabController.dart';
import 'package:motion_tab_bar/TabItem.dart';
import 'package:motion_tab_bar/motiontabbar.dart';Step 3: Enable AndriodX
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=trueCode Implementation :
You need to implement it in your code respectively:
Before exploring the motion tab bar we will create a controller and define it inside initState() and define it inside the initialIndex property in MotionTabController().
late MotionTabController _tabController;
@override
void initState() {
super.initState();
_tabController = MotionTabController(initialIndex: 1, vsync: this);
}We will add MotionTabBar() in bottomNavigationBar. Inside, we will add labels, initialSelectedTab, tabIconColor and onTabItemSelected. In onTabItemSelected, we will add inside setState() method. In this method, we will add _tabController.index is equal to the value. Also, add icons and textStyle.bottomNavigationBar:
MotionTabBar(
labels: [
"Account","Home","Dashboard"
],
initialSelectedTab: "Home",
tabIconColor: Colors.green,
tabSelectedColor: Colors.red,
onTabItemSelected: (int value){
print(value);
setState(() {
_tabController.index = value;
});
},
icons: [
Icons.account_box,Icons.home,Icons.menu
],
textStyle: TextStyle(color: Colors.red),
),After this we will use MotionTabBarView in the motion tab bar, inside it we have taken three different types of container which has some different type of text on its child when we tap on a given item of bottom navigation bar then a different type of page according to index will show.
MotionTabBarView(
controller: _tabController,
children: <Widget>[
Container(
child: Center(
child: Text("Account"),
),
),
Container(
child: Center(
child: Text("Home"),
),
),
Container(
child: Center(
child: Text("Dashboard"),
),
),
],
)Code File :
import 'package:flutter/material.dart';
import 'package:motion_tab_bar/MotionTabBarView.dart';
import 'package:motion_tab_bar/MotionTabController.dart';
import 'package:motion_tab_bar/motiontabbar.dart';
class MotionTabBarDemo extends StatefulWidget {
@override
_MotionTabBarDemoState createState() => _MotionTabBarDemoState();
}
class _MotionTabBarDemoState extends State<MotionTabBarDemo>with TickerProviderStateMixin {
late MotionTabController _tabController;
@override
void initState() {
super.initState();
_tabController = MotionTabController(initialIndex: 1, vsync: this);
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Motion Tabbar Demo'),
),
bottomNavigationBar: MotionTabBar(
labels: [
"Account","Home","Dashboard"
],
initialSelectedTab: "Home",
tabIconColor: Colors.green,
tabSelectedColor: Colors.red,
onTabItemSelected: (int value){
print(value);
setState(() {
_tabController.index = value;
});
},
icons: [
Icons.account_box,Icons.home,Icons.menu
],
textStyle: TextStyle(color: Colors.red),
),
body: MotionTabBarView(
controller: _tabController,
children: <Widget>[
Container(
child: Center(
child: Text("Account"),
),
),
Container(
child: Center(
child: Text("Home"),
),
),
Container(
child: Center(
child: Text("Dashboard"),
),
),
],
)
);
}
}
Conclusion:
In this article, I have explained Glassmorphism Card In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Glassmorphism Card In Flutter demo from our side.
I hope this blog will provide you with sufficient information on Trying up the Glassmorphism Card In Flutter in your flutter project. We showed you what the Glassmorphism Card In Flutter is and work on it 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.
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
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.
Related: Cupertino TabBar In Flutter
Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.
