Programming

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 pub.dev.

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 pub.dev 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.

dependencies:
  flutter:
    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() {
  runApp(MyApp());
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  @override
  void initState() {
    _tabController = new MotionTabController(initialIndex:1, vsync: this);
    super.initState();
  }

@override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        
        title: Text(widget.title),
      ),
       body: MotionTabBarView(
        controller: _tabController,
        children: <Widget>[
          Container(
            child: Center(
              child: Text("Home"),
            ),
          ),
          Container(
            child: Center(
              child: Text("Search"),
            ),
          ),
          Container(
            child: Center(
              child: Text("Account"),
            ),
          ),
        ],
      ),
      bottomNavigationBar: MotionTabBar(
        tabOneName: "Home",
        tabTwoName: "Search",
        tabThreeName: "Account",
        tabOneIcon: Icons.home,
        tabTwoIcon: Icons.search,
        tabThreeIcon: Icons.account_box,
        tabIconColor: Colors.green,
        initialSelectedTab: 1,
        tabSelectedColor: Colors.red,
        textStyle: TextStyle(color: Colors.red),
        onTabItemSelected: (int value){
          print(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.

Attributes

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

GitHub

Tags

Related Articles

Leave a Reply

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

Close