Explore Motion Bottom TabBar In Flutter

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

Implementation

Code Implement

Code File

Conclusion

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.5

Step 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=true

Code 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.

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.