Animated Bottom Navigation Bar Widget (Motion Tab Bar) in Flutter

A beautiful animated flutter widget package library

An animated Bottom Navigation bar in Flutter just got easier and beautiful with slides using the plugin called Motion Tab Bar that was coded up by rejaulcuet88. Available at

Its an animated Bottom Navigation Bar for Flutter apps, giving you the possibility to animate icons into place, set up preferred colors, and giving you lots of other customizing options.

Some people call it a beautiful animated flutter widget package library that your user would find cool. Its almost like creating a Tab Bar, but then, This looks lovely and beautiful. As a flutter dev, you’d love it.

Flutter Packages Needed

Visit to get thispackages.

  • Motion Tab Bar (motion_tab_bar 0.1.2)

Install the MotionTabBar Packages in Pubspec.yaml

Go to your pubspec.yaml file in your project and add the motion_tab_bar package below your dependency, the same way it is shown below.

    sdk: flutter
  motion_tab_bar: ^0.1.2

Import the MotionTabBar package & Apply the code

Firstly, import your MotionTabBar and Material package to your dart page, See an example below of how you can use the Tab Bar package in your App.

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';
void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      home: MyHomePage(title: 'Flutter Demo Home Page'),
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
      MotionTabController _tabController;

  void initState() {
    _tabController = new MotionTabController(initialIndex:1, vsync: this);

  void dispose() {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
       body: MotionTabBarView(
        controller: _tabController,
        children: <Widget>[
            child: Center(
              child: Text("Home"),
            child: Center(
              child: Text("Search"),
            child: Center(
              child: Text("Account"),
      bottomNavigationBar: MotionTabBar(
        tabOneName: "Home",
        tabTwoName: "Search",
        tabThreeName: "Account",
        tabOneIcon: Icons.home,
        tabThreeIcon: Icons.account_box,
        initialSelectedTab: 1,
        textStyle: TextStyle(color:,
        onTabItemSelected: (int value){
          setState(() {
            _tabController.index = value;
      // This trailing comma makes auto-formatting nicer for build methods.

Did you get an issue or error after following this tutorial?, do well to drop us a comment below, We’ll get back to your with a solution as soon as we can.
Also, do well to ask your question in Forum Section.


  • tabOneName, 
  • tabTwoName,
  • tabThreeName,
  • tabOneIcon, 
  • tabTwoIcon, 
  • tabThreeIcon
  • tabIconColor,
  • tabSelectedColor,
  • textStyle,
  • onTabItemSelected
  • initialSelectedTab;


Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.