A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Last update: Jul 28, 2022

Motion Tab Bar

A beautiful animated widget for your Flutter apps

Preview:

|MotionTabBar Gif |

Getting Started

Add the plugin:

dependencies:
  motion_tab_bar: ^0.1.5

Basic Usage

Adding the widget

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

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  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),
  ),

Catch me up on LinkedIn @Rezaul Islam

💙 to Code👨🏽‍💻 Flutter Expert • Dart Kotlin Swift Node Js • Android • Full Stack Mobile Developer

GitHub

https://github.com/therezacuet/Motion-Tab-Bar
Comments
  • 1. Contributing

    Hi Rezaul ! I've been using this repository for a flutter project, and I had to make changes to the MotionTabBar class you provide. I think it could be interesting that I share with you my modifications through a Pull Request, if you're interested in accepting contribution to you repository 😃

    If it's OK for you, let me know 😃

    Alexandre

    Reviewed by AlexBolot at 2020-06-23 07:38
  • 2. initialIndex of the bottomNavigationBar?

    Hi dev, the initial tab is still fixed to index 1 in view even the initialIndex of _tabController is set to 0.

      @override
      void initState() {
        super.initState();
        _tabController = new MotionTabController(initialIndex: 0,vsync: this);
      }
    
    Reviewed by miaachan at 2020-06-10 07:59
  • 3. animateTo isn't working

    I'm using the following code to change to displayed tab on swipe-right or swipe-left via code. Please note the _tabController.animateTo:

            body: GestureDetector(
              onHorizontalDragEnd: (drawEndDetails) {
                print(drawEndDetails);
                if (drawEndDetails.primaryVelocity > 0.0 && _tabController.index > 0) {
                  setState(() => _tabController.animateTo(_tabController.index - 1));
                } else if (drawEndDetails.primaryVelocity < 0.0 && _tabController.index < _labels.length - 1) {
                  setState(() => _tabController.animateTo(_tabController.index + 1));
                }
              },
              child: MotionTabBarView(
                controller: _tabController,
                children: [
                  ContactCreateHistory(encounter: widget._encounter),
                  ContactCreateContacts(encounter: widget._encounter),
                  ContactCreateMaps(encounter: widget._encounter),
                  ContactCreateFormular(encounter: widget._encounter),
                ],
              ),
            ),
    

    The displayed content is updated correctly, but not the tab-display. it is not animating nor updated.

    Before swipe, on the first tab: image After swipe, tab-content updated to second tab, should be focusing red circled tab: image

    Am I doing something wrong?

    Reviewed by myThorsten at 2020-10-09 20:02
  • 4. Upgrading motiontabbar.dart, now allowing more than 3 tabs to be displayed

    • Replaced tabOne, tabTwo, etc with a list of icons and a list of labels
    • TabItem.dart : no major changes, only style and code reorganization
    • main.dart : updated demo :)
    Reviewed by AlexBolot at 2020-06-24 07:53
  • 5. Update to support Null-safety; added new parameters

    • Update to support null-safety
    • add new parameters:
      • tabBarHeight (double)
      • tabBarColor (Colors)
      • tabSize (double)
      • tabIconSize (double)
      • tabIconSelectedSize (double)
      • tabIconSelectedColor (Colors)
    Reviewed by kimmanwky at 2021-07-23 09:53
  • 6. More than 3 iteams in bottom bar

    This parameter should be optional, or at least to expect no more than 5 elements as UI/UX suggest for every application.

    https://github.com/therezacuet/Motion-Tab-Bar/blob/bbb2b514b92061984b23322c733d2547d0e574c0/lib/MotionTabController.dart#L7

    Reviewed by petarkovac at 2020-08-11 02:31
  • 7. Not using safe area on iphone with bottom handel

    Using the simple example i implemented Motion tab bar on an iphone with bottom handle bar line iphone X and it is observed that there is not much padding between the bottom handle and the tab title.

    Screenshot 2020-07-09 at 11 50 46 PM

    And when MotionTabBar is wrapped inside SafeArea or BottomAppBar widget it seems that the whole tab bar breaks

    Screenshot 2020-07-09 at 11 55 09 PM
    Reviewed by nishiths23 at 2020-07-09 18:25
  • 8. Bar background color?

    Any chance that we can set the bar background color? I have done my own "dark mode" and need to be able to set backgroundcolor: _myActiveBackgroundColor (as an example).

    Reviewed by rgbinnovation at 2021-04-29 06:16
  • 9. Can not set active tab.

    Why can't I set an active index myself. I want to move back to home screen when I press back button on mobile device but there is no option to set active index by myself. Looking forward for your replay.

    Reviewed by MMohsin737 at 2020-07-09 12:25
  • 10. Hide tab Bar on Scroll

    How to auto-hide tab bar on the scroll? Also, the Tab option is limited to 3, it would be great if we can make it dynamic base MotionTabBar Label's count.

    Reviewed by HarshaiOS1 at 2020-07-02 17:30
  • 11. [PLEASE READ] Due to contributor inactivity, this package has been forked as "motion_tab_bar_v2" with null-safety support

    Reviewed by kimmanwky at 2021-10-12 02:59
  • 12. Padding needed on iOS, overlapping occurs

    Hi,

    Padding is needed on iOS. As you can see on the attached image, the lower iOS "Action Bar" overlaps the navigation texts. Maybe some additional padding could be added? IMG_5283

    Reviewed by rgbinnovation at 2021-04-30 09:40

Related

Flutter-animated-ui-space-app - ⚡Animated UI Space App Challenge Part 5 🐱‍👤🐱‍👤
Flutter-animated-ui-space-app - ⚡Animated UI Space App Challenge Part 5 🐱‍👤🐱‍👤

Flutter-animated-ui-space-app ?? ?? Project img : Image Challenge Code Image Note !! : Please include your photos to show and install simple_animation

Jul 14, 2022
Flutter animated theme switcher

animated_theme_switcher Animated theme switcher. This library starts from Peyman's stackoverflow question how-to-add-animation-for-theme-switching-in-

Jun 24, 2022
A beautiful animated onboarding app.
A beautiful animated onboarding app.

Animated Onboarding Made with ?? in India This flutter app is made just to demonstrate how to we can make an animated onboarding experience that looks

Aug 10, 2022
Beautiful Animated ListView and GridView

staggered_animated_listview Beautiful Animated ListView and GridView Online Preview Getting Started This project is a starting point for a Flutter app

Dec 11, 2021
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Apr 16, 2021
Easy to use, customizable and pluggable Theme Provider.
Easy to use, customizable and pluggable Theme Provider.

theme_provider Easy to use, customizable Theme Provider. This provides app color schemes throughout the app and automatically rebuilds the UI dynamica

Jul 13, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Aug 13, 2022
Animated triangles background widget with color gradients
Animated triangles background widget with color gradients

Triangles background Animated triangles background widget with color gradients Getting Started click image to see the video Usage add this line to pub

Jul 12, 2022
Flutter package for animated unit stepper.
Flutter package for animated unit stepper.

stepo A highly customisable Flutter package for animated unit stepper Supported Dart Versions Dart SDK version >= 2.1.0 Demo Gif Installation Add the

Feb 4, 2021
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]
🔔  A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Aug 11, 2022
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

May 20, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

Jul 31, 2022
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.

progress_dialog A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically. T

Jan 21, 2022
A collection of Screens and attractive UIs built with Flutter ready to be used in your applications. No external libraries are used. Just download, add to your project and use.
A collection of Screens and attractive UIs built with Flutter ready to be used in your applications. No external libraries are used. Just download, add to your project and use.

Flutter Screens A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs, built with Flutter, ready to be used in your applicat

Aug 13, 2022
A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.
A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

Jul 20, 2022
Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs.
Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs.

Flutter DropdownButton2 Intro Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs. Featur

Aug 2, 2022
How to add a notification badge in bottom navigation bar

bottom_navigation_badge / BottomNavigationBadge BottomNavigationBadge is a Flutter class developed by westdabestdb. Getting Started Add this to your p

May 21, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Aug 9, 2022
Animated Menu in Flutter using radial.
Animated Menu in Flutter using radial.

Animated_radial_Menu_in_Flutter Animated Menu in Flutter using radial. Getting Started This project is a starting point for a Flutter application. A f

Jul 18, 2022