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.

Overview

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

Comments
  • Contributing

    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

    opened by AlexBolot 9
  • initialIndex of the bottomNavigationBar?

    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);
      }
    
    opened by miaachan 4
  • animateTo isn't working

    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?

    opened by myThorsten 3
  • Upgrading motiontabbar.dart, now allowing more than 3 tabs to be displayed

    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 :)
    opened by AlexBolot 3
  • Update to support Null-safety; added new parameters

    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)
    opened by kimmanwky 2
  • More than 3 iteams in bottom bar

    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

    opened by petarkovac 2
  • Not using safe area on iphone with bottom handel

    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
    opened by nishiths23 2
  • Bar background color?

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

    opened by rgbinnovation 1
  • Can not set active tab.

    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.

    opened by MMohsin737 1
  • Hide tab Bar on Scroll

    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.

    opened by HarshaiOS1 1
  • [PLEASE READ] Due to contributor inactivity, this package has been forked as

    [PLEASE READ] Due to contributor inactivity, this package has been forked as "motion_tab_bar_v2" with null-safety support

    opened by kimmanwky 1
  • Padding needed on iOS, overlapping occurs

    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

    opened by rgbinnovation 4
Owner
Rezaul Islam
Software Engineer
Rezaul Islam
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

Hmida 7 Sep 15, 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-

Kherel 223 Dec 23, 2022
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

Shubham Soni 117 Dec 4, 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

Elyas Sekhavati Nia 1 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

Jimmy Aumard 25 Apr 16, 2021
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

K.D. Sunera Avinash Chandrasiri 143 Dec 10, 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. Can be useful for OTP or pin code inputs ?? ??

Adar 550 Dec 23, 2022
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

Marco Bavagnoli 17 Oct 13, 2022
🔔 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

Ayush Agarwal 1.4k Jan 6, 2023
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

hd-motion 23 Feb 4, 2021
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

FlutterCandies 357 Dec 27, 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.

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

Mohammad Fayaz 202 Dec 11, 2022
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

Subir Chakraborty 132 Nov 13, 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.

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

Samarth Agarwal 5k Dec 31, 2022
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

AHMED ELSAYED 125 Jan 4, 2023
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.

HeavenOSK 97 Jan 6, 2023
A Flutter package allows you to Showcase/Highlight your widgets step by step.

ShowCaseView A Flutter package allows you to Showcase/Highlight your widgets step by step. Preview Installing Add dependency to pubspec.yaml Get the l

kirill 0 Dec 8, 2022
A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

大海豚 462 Jan 3, 2023
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

Görkem Erol 50 May 21, 2022