{"id":13552005,"url":"https://github.com/therezacuet/Motion-Tab-Bar","last_synced_at":"2025-04-03T02:32:43.979Z","repository":{"id":41286036,"uuid":"270112629","full_name":"therezacuet/Motion-Tab-Bar","owner":"therezacuet","description":"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.","archived":false,"fork":false,"pushed_at":"2024-01-05T18:25:52.000Z","size":9890,"stargazers_count":304,"open_issues_count":6,"forks_count":79,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T15:02:45.925Z","etag":null,"topics":["android","android-library","appbar","bottomnavigationview","dart","dart-library","dart-package","dartlang","flutter","flutter-apps","flutter-demo","flutter-material","flutter-package","flutter-plugin","flutter-ui","flutter-widget","ios","ios-lib","tabbar","widget"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/therezacuet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-06T21:45:50.000Z","updated_at":"2024-10-26T20:27:59.000Z","dependencies_parsed_at":"2023-12-12T18:12:46.174Z","dependency_job_id":"c0c5c03e-ea35-47a2-8727-bd5904990784","html_url":"https://github.com/therezacuet/Motion-Tab-Bar","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/therezacuet%2FMotion-Tab-Bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/therezacuet%2FMotion-Tab-Bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/therezacuet%2FMotion-Tab-Bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/therezacuet%2FMotion-Tab-Bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/therezacuet","download_url":"https://codeload.github.com/therezacuet/Motion-Tab-Bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222911647,"owners_count":17056714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-library","appbar","bottomnavigationview","dart","dart-library","dart-package","dartlang","flutter","flutter-apps","flutter-demo","flutter-material","flutter-package","flutter-plugin","flutter-ui","flutter-widget","ios","ios-lib","tabbar","widget"],"created_at":"2024-08-01T12:01:57.351Z","updated_at":"2024-11-03T22:33:08.900Z","avatar_url":"https://github.com/therezacuet.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Motion Tab Bar compatible with Flutter 3 and RTL support\n\n[![pub package](https://img.shields.io/pub/v/motion_tab_bar)](https://pub.dev/packages/motion_tab_bar)\n[![likes](https://img.shields.io/pub/likes/motion_tab_bar)](https://pub.dev/packages/motion_tab_bar/score)\n[![popularity](https://img.shields.io/pub/popularity/motion_tab_bar)](https://pub.dev/packages/motion_tab_bar/score)\n[![pub points](https://img.shields.io/pub/points/motion_tab_bar)](https://pub.dev/packages/motion_tab_bar/score)\n\nA beautiful animated widget for your Flutter apps\n\n![MotionTabBar Gif](https://github.com/therezacuet/Motion-Tab-Bar/blob/master/motiontabbar.gif?raw=true)\n\n| Without Badge  | With Badge |\n| ------------- | ------------- |\n| ![MotionTabBar Gif](https://github.com/therezacuet/Motion-Tab-Bar/blob/master/motiontabbar_v2.gif?raw=true)  | ![MotionTabBar Gif](https://github.com/therezacuet/Motion-Tab-Bar/blob/master/motiontabbar_v2.1.gif?raw=true)  |\n\n## Getting Started\n\nAdd the plugin:\n\n```yaml\ndependencies:\n  motion_tab_bar: ^2.0.4\n```\n\n## Basic Usage\n\n### Use default TabController or MotionTabBarController:\n\n```dart\n  // TabController _tabController;\n  MotionTabBarController? _motionTabBarController;\n\n  @override\n  void initState() {\n    super.initState();\n    \n    //// Use normal tab controller\n    // _tabController = TabController(\n    //   initialIndex: 1,\n    //   length: 4,\n    //   vsync: this,\n    // );\n\n    //// use \"MotionTabBarController\" to replace with \"TabController\", if you need to programmatically change the tab\n    _motionTabBarController = MotionTabBarController(\n      initialIndex: 1,\n      length: 4,\n      vsync: this,\n    );\n  }\n\n  @override\n  void dispose() {\n    super.dispose();\n\n    // _tabController.dispose();\n    _motionTabBarController!.dispose();\n  }\n```\n\n### Add Motion Tab Bar to Scaffold bottomNavigationBar:\n\n```dart\n  bottomNavigationBar: MotionTabBar(\n    controller: _motionTabBarController, // ADD THIS if you need to change your tab programmatically\n    initialSelectedTab: \"Home\",\n    labels: const [\"Dashboard\", \"Home\", \"Profile\", \"Settings\"],\n    icons: const [Icons.dashboard, Icons.home, Icons.people_alt, Icons.settings],\n\n    // optional badges, length must be same with labels\n    badges: [\n      // Default Motion Badge Widget\n      const MotionBadgeWidget(\n        text: '10+',\n        textColor: Colors.white, // optional, default to Colors.white\n        color: Colors.red, // optional, default to Colors.red\n        size: 18, // optional, default to 18\n      ),\n\n      // custom badge Widget\n      Container(\n        color: Colors.black,\n        padding: const EdgeInsets.all(2),\n        child: const Text(\n          '11',\n          style: TextStyle(\n            fontSize: 14,\n            color: Colors.white,\n          ),\n        ),\n      ),\n\n      // allow null\n      null,\n\n      // Default Motion Badge Widget with indicator only\n      const MotionBadgeWidget(\n        isIndicator: true,\n        color: Colors.blue, // optional, default to Colors.red\n        size: 5, // optional, default to 5,\n        show: true, // true / false\n      ),\n    ],\n    tabSize: 50,\n    tabBarHeight: 55,\n    textStyle: const TextStyle(\n      fontSize: 12,\n      color: Colors.black,\n      fontWeight: FontWeight.w500,\n    ),\n    tabIconColor: Colors.blue[600],\n    tabIconSize: 28.0,\n    tabIconSelectedSize: 26.0,\n    tabSelectedColor: Colors.blue[900],\n    tabIconSelectedColor: Colors.white,\n    tabBarColor: Colors.white,\n    onTabItemSelected: (int value) {\n      setState(() {\n        // _tabController!.index = value;\n        _motionTabBarController!.index = value;\n      });\n    },\n  ),\n```\n\n### add TabBarView to Scaffold body\n\n```dart\n  body: TabBarView(\n    physics: NeverScrollableScrollPhysics(), // swipe navigation handling is not supported\n    // controller: _tabController,\n    controller: _motionTabBarController,\n    children: \u003cWidget\u003e[\n      const Center(\n        child: Text(\"Dashboard\"),\n      ),\n      const Center(\n        child: Text(\"Home\"),\n      ),\n      const Center(\n        child: Text(\"Profile\"),\n      ),\n      const Center(\n        child: Text(\"Settings\"),\n      ),\n    ],\n  ),\n```\n\n\n### to change tabs programmatically\n```dart\n...\n\nElevatedButton(\n  // set MotionTabBarController index to new tab index\n  onPressed: () =\u003e _motionTabBarController.index = 0,\n  child: const Text('Dashboard Page'),\n),\nElevatedButton(\n  // set MotionTabBarController index to new tab index\n  onPressed: () =\u003e _motionTabBarController.index = 1,\n  child: const Text('Home Page'),\n),\n\n...\n```\n\n\nCatch me up on **LinkedIn** @[Rezaul Islam](www.linkedin.com/in/therezacuet \"Rezaul Islam\")\n\n💙 to Code👨🏽‍💻 Flutter Expert • Dart Kotlin Swift Node Js • Android • Full Stack Developer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftherezacuet%2FMotion-Tab-Bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftherezacuet%2FMotion-Tab-Bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftherezacuet%2FMotion-Tab-Bar/lists"}