{"id":32300117,"url":"https://github.com/alihaider78222/dynamic_tabbar","last_synced_at":"2026-02-22T12:07:33.517Z","repository":{"id":214406315,"uuid":"735593245","full_name":"alihaider78222/dynamic_tabbar","owner":"alihaider78222","description":"Flutter package for creating dynamic tabs (TabBar and TabBarView).","archived":false,"fork":false,"pushed_at":"2024-12-12T23:20:18.000Z","size":3248,"stargazers_count":17,"open_issues_count":9,"forks_count":13,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T03:35:57.924Z","etag":null,"topics":["dart","dart-package","dynamic","dynamic-tab","dynamic-tabbar","dynamic-tabs","flutter","flutter-package","tabbar","tabbarcontroller","tabbarview","tabs","tabs-component","tabs-management","tabs-switching","tabs-widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/dynamic_tabbar","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/alihaider78222.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":"2023-12-25T13:27:05.000Z","updated_at":"2025-02-24T23:21:54.000Z","dependencies_parsed_at":"2024-01-15T09:05:45.664Z","dependency_job_id":"3b5d4c0f-ad36-4a5f-a979-b3b7110482bb","html_url":"https://github.com/alihaider78222/dynamic_tabbar","commit_stats":{"total_commits":38,"total_committers":3,"mean_commits":"12.666666666666666","dds":"0.052631578947368474","last_synced_commit":"f4668e44c423f44db24f06532aadbf52712cfd36"},"previous_names":["alihaider78222/dynamic_tabbar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alihaider78222/dynamic_tabbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alihaider78222%2Fdynamic_tabbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alihaider78222%2Fdynamic_tabbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alihaider78222%2Fdynamic_tabbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alihaider78222%2Fdynamic_tabbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alihaider78222","download_url":"https://codeload.github.com/alihaider78222/dynamic_tabbar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alihaider78222%2Fdynamic_tabbar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29711642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T10:34:24.778Z","status":"ssl_error","status_checked_at":"2026-02-22T10:32:23.200Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dart","dart-package","dynamic","dynamic-tab","dynamic-tabbar","dynamic-tabs","flutter","flutter-package","tabbar","tabbarcontroller","tabbarview","tabs","tabs-component","tabs-management","tabs-switching","tabs-widget"],"created_at":"2025-10-23T05:11:45.125Z","updated_at":"2026-02-22T12:07:33.509Z","avatar_url":"https://github.com/alihaider78222.png","language":"Dart","readme":"![dynamic_tabbar](https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/banner.png)\n\n# Dynamic TabBar\n\nA Flutter package that simplifies the implementation of dynamic TabBar in your application.\n\nWith [`DynamicTabBarWidget`](https://pub.dev/packages/dynamic_tabbar), users can effortlessly manage and navigate through a list of [Tabs](https://api.flutter.dev/flutter/material/TabBar-class.html). The widget is designed to auto-update as \u003cb\u003eTabs\u003c/b\u003e are added or removed, providing a seamless and dynamic user experience.\n\n🚀 Demo: [Dynamic Tabbar](https://alihaider78222.github.io/dynamic-tabbar-demo/)\n\n## 📱 Screenshots\n\n\u003cp float=\"left\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/demo_1.gif\" alt=\"dynamic_tabbar Demo 1\" width=\"auto\" height=\"570\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/demo_2.gif\" alt=\"dynamic_tabbar Demo 2\" width=\"auto\" height=\"570\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/demo_4.gif\" alt=\"dynamic_tabbar Demo 4\" width=\"auto\" height=\"570\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/demo_3.gif\" alt=\"dynamic_tabbar Web Demo\" height=\"auto\"\u003e\n\u003c/p\u003e\n\n## 🛠 Installation\n\n1. Add dependency to `pubspec.yaml` file:\u003c/br\u003e\nGet the latest version from the 'Installing' tab on [pub.dev](https://pub.dev/packages/dynamic_tabbar/install)\n\n```yaml\ndependencies:\n  dynamic_tabbar: ^latest_version\n```\n\n2. Import the package\n\n```dart\nimport 'package:dynamic_tabbar/dynamic_tabbar.dart';\n```\n\n3. Adding DynamicTabBarWidget\n\n*With required parameters*\n\n```dart\n DynamicTabBarWidget(\n    dynamicTabs: tabs,\n);\n```\n\n*With optional parameters*\n\n```dart\n DynamicTabBarWidget(\n    dynamicTabs: tabs,\n    isScrollable: isScrollable,\n    onTabControllerUpdated: (controller) {},\n    onTabChanged: (index) {},\n    onAddTabMoveTo: MoveToTab.last,\n    onAddTabMoveToIndex : null,\n    backIcon: Icon(Icons.arrow_back),\n    nextIcon: Icon(Icons.arrow_forward),\n    showBackIcon: showBackIcon,\n    showNextIcon: showNextIcon,\n    leading : leadingWidget,\n    trailing : trailingWidget,\n\n    // Default Tab properties can also be updated\n    padding: padding,\n    indicatorColor: indicatorColor,\n    automaticIndicatorColorAdjustment: automaticIndicatorColorAdjustment,\n    indicatorWeight: indicatorWeight,\n    indicatorPadding: indicatorPadding,\n    indicator: indicator,\n    indicatorSize: indicatorSize,\n    dividerColor: dividerColor,\n    dividerHeight: dividerHeight,\n    labelColor: labelColor,\n    labelStyle: labelStyle,\n    labelPadding: labelPadding,\n    unselectedLabelColor: unselectedLabelColor,\n    unselectedLabelStyle: unselectedLabelStyle,\n    dragStartBehavior: dragStartBehavior,\n    overlayColor: overlayColor,\n    mouseCursor: mouseCursor,\n    enableFeedback: enableFeedback,\n    onTap: onTap,\n    physics: physics,\n    splashFactory: splashFactory,\n    splashBorderRadius: splashBorderRadius,\n    tabAlignment: tabAlignment,\n\n    // Default TabBarView properties can also be updated\n    physicsTabBarView: physicsTabBarView,\n    dragStartBehaviorTabBarView: physicsTabBarView,\n    viewportFractionTabBarView: viewportFractionTabBarView,\n    clipBehaviorTabBarView: clipBehaviorTabBarView,\n);\n\n```\n\n## 🌟 Features\n\n- \u003cb\u003eDynamic Tab Management\u003c/b\u003e: Users can push or pop items in the `List\u003cTabData\u003e tabs` array, and the \u003cb\u003eDynamicTabBarWidget\u003c/b\u003e will auto-update accordingly.\n\n- \u003cb\u003eTab Navigation\u003c/b\u003e: Implement the `onTabChanged` callback to handle tab change events.\n\n- \u003cb\u003eCustomization Options\u003c/b\u003e: Customize the appearance and behavior of the DynamicTabBarWidget using parameters like `backIcon, nextIcon, showBackIcon, and showNextIcon`.\n\n- \u003cb\u003eTab Position\u003c/b\u003e : Specify the position to which cursor moves to after adding new Tab using the `onAddTabMoveTo` property.\n\n### 🧰 Parameters\n\n- \u003cb\u003edynamicTabs\u003c/b\u003e: List of TabData objects representing the dynamic tabs.\n\n- \u003cb\u003eisScrollable\u003c/b\u003e: Set to true to enable scrollable tabs.\n\n- \u003cb\u003eonTabChanged\u003c/b\u003e: Callback function triggered when a tab is changed.\n\n- \u003cb\u003eonAddTabMoveTo\u003c/b\u003e: Enum value (`MoveToTab.idol`, `MoveToTab.last`) specifying where a tab navigator should move when Tab is added.\n\n- \u003cb\u003ebackIcon\u003c/b\u003e: Custom icon for the \"Back\" button, If `isScrollable` is false, this property is ignored.\n\n- \u003cb\u003enextIcon\u003c/b\u003e: Custom icon for the \"Next\" button.\n\n- \u003cb\u003eshowBackIcon\u003c/b\u003e: Boolean to show or hide the `Back icon` button, If `isScrollable` is false, this property is ignored.\n\n- \u003cb\u003eshowNextIcon\u003c/b\u003e: Boolean to show or hide the `Next icon` button, If `isScrollable` is false, this property is ignored.\n\n- \u003cb\u003eleading\u003c/b\u003e: Custom `leading Widget` if needed.\n\n- \u003cb\u003etrailing\u003c/b\u003e: Custom `trailing Widget` if needed.\n\n- `TabBar` default properties...\n\n- and `TabBarView` default properties...\n\n## 📚 How to use\n\n### isScrollable\n\n`isScrollable: false`  | `isScrollable: true`\n-- | --\n \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/scrollable_false.gif\" alt=\"isScrollable.false\"\u003e |  \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/scrollable_true.gif\" alt=\"isScrollable.true\"\u003e\n\n### showBackIcon\n\nIf `isScrollable` is false, this property is ignored.\n\n`showBackIcon: false`  | `showBackIcon: true`\n-- | --\n \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/showBackIcon_false.png\" alt=\"isScrollable.true\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/showIcon_true.png\" alt=\"isScrollable.true\"\u003e\n\n### showNextIcon\n\nIf `isScrollable` is false, this property is ignored.\n\n`showNextIcon: false`  | `showNextIcon: true`\n-- | --\n \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/showNextIcon_false.png\" alt=\"isScrollable.true\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/showIcon_true.png\" alt=\"isScrollable.true\"\u003e\n\n### backIcon\n\nWe can use custom Icon for back button, If `isScrollable` is false, this property is ignored.\n\n`backIcon: Icon()`  | `backIcon: null`\n-- | --\n`Icon(Icons.keyboard_double_arrow_left)`  | Default back icon will be used\n \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/backIcon_custom.gif\" alt=\"isScrollable.true\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/showIcon_true.png\" alt=\"isScrollable.true\"\u003e\n\n### nextIcon\n\nWe can use custom Icon for next button, If `isScrollable` is false, this property is ignored.\n\n`nextIcon: Icon()`  | `nextIcon: null`\n-- | --\n`Icon(Icons.keyboard_double_arrow_right)`  | Default back icon will be used\n \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/nextIcon_custom.gif\" alt=\"nextIcon_custom\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/alihaider78222/dynamic_tabbar/main/screenshots/showIcon_true.png\" alt=\"default_icons\"\u003e\n\n## 💻 Example\n\nCheck out the **example** app in the [example](example) directory for a complete example with additional parameters.\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:dynamic_tabbar/dynamic_tabbar.dart';\n\n\nclass DynamicTabExample extends StatefulWidget {\n  const DynamicTabExample({super.key});\n  @override\n  State\u003cDynamicTabExample\u003e createState() =\u003e _DynamicTabExampleState();\n}\n\nclass _DynamicTabExampleState extends State\u003cDynamicTabExample\u003e {\n  bool isScrollable = false;\n  bool showNextIcon = true;\n  bool showBackIcon = true;\n\n  List\u003cTabData\u003e tabs = [\n    TabData(\n      index: 1,\n      title: const Tab(\n        child: Text('Tab 1'),\n      ),\n      content: const Center(child: Text('Content for Tab 1')),\n    ),\n    TabData(\n      index: 2,\n      title: const Tab(\n        child: Text('Tab 2'),\n      ),\n      content: const Center(child: Text('Content for Tab 2')),\n    ),\n    // Add more tabs as needed\n  ];\n\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Example for Dynamic Tab'),\n      ),\n      body: Column(\n        mainAxisSize: MainAxisSize.min,\n        children: \u003cWidget\u003e[\n          Padding(\n            padding: const EdgeInsets.all(8.0),\n            child: Wrap(\n              direction: Axis.horizontal,\n              alignment: WrapAlignment.center,\n              children: [\n                ElevatedButton(\n                  onPressed: addTab,\n                  child: const Text('Add Tab'),\n                ),\n                const SizedBox(width: 12),\n                ElevatedButton(\n                  onPressed: () =\u003e removeTab(tabs.length - 1),\n                  child: const Text('Remove Last Tab'),\n                ),\n                const SizedBox(width: 16),\n                Row(\n                  mainAxisSize: MainAxisSize.min,\n                  children: [\n                    const Text('isScrollable'),\n                    Switch.adaptive(\n                      value: isScrollable,\n                      onChanged: (bool val) {\n                        setState(() {\n                          isScrollable = !isScrollable;\n                        });\n                      },\n                    ),\n                  ],\n                ),\n                const SizedBox(width: 16),\n                Row(\n                  mainAxisSize: MainAxisSize.min,\n                  children: [\n                    const Text('showBackIcon'),\n                    Switch.adaptive(\n                      value: showBackIcon,\n                      onChanged: (bool val) {\n                        setState(() {\n                          showBackIcon = !showBackIcon;\n                        });\n                      },\n                    ),\n                  ],\n                ),\n                const SizedBox(width: 16),\n                Row(\n                  mainAxisSize: MainAxisSize.min,\n                  children: [\n                    const Text('showNextIcon'),\n                    Switch.adaptive(\n                      value: showNextIcon,\n                      onChanged: (bool val) {\n                        setState(() {\n                          showNextIcon = !showNextIcon;\n                        });\n                      },\n                    ),\n                  ],\n                ),\n              ],\n            ),\n          ),\n          Expanded(\n            child: DynamicTabBarWidget(\n              dynamicTabs: tabs,\n              isScrollable: isScrollable,\n              onTabControllerUpdated: (controller) {},\n              onTabChanged: (index) {},\n              onAddTabMoveTo: MoveToTab.last,\n              showBackIcon: showBackIcon,\n              showNextIcon: showNextIcon,\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n\n  void addTab() {\n    setState(() {\n      var tabNumber = tabs.length + 1;\n      tabs.add(\n        TabData(\n          index: tabNumber,\n          title: Tab(\n            child: Text('Tab $tabNumber'),\n          ),\n          content: Column(\n            mainAxisAlignment: MainAxisAlignment.center,\n            children: [\n              Text('Dynamic Tab $tabNumber'),\n              const SizedBox(height: 20),\n              ElevatedButton(\n                onPressed: () =\u003e removeTab(tabNumber - 1),\n                child: const Text('Remove this Tab'),\n              ),\n            ],\n          ),\n        ),\n      );\n    });\n  }\n\n  void removeTab(int id) {\n    setState(() {\n      tabs.removeAt(id);\n    });\n  }\n}\n\n```\n\n## 📝Contribution\n\nOf course the project is open source, and you can contribute to it [repository link](https://github.com/alihaider78222/dynamic_tabbar)\n\n- If you **found a bug**, open an issue.\n\n- If you **have a feature request**, open an issue.\n\n- If you **want to contribute**, submit a pull request.\n\n## 💳 License\n\nThis project is [LICENSED](https://choosealicense.com/licenses/mit/) under the MIT License. Use it freely, but let's play nice and give credit where it's due!\n\n## 🎉 Conclusion\n\nI will be happy to answer any questions that you may have on this approach,\u003c/br\u003e\nIf you liked this package, don't forget to show some ❤️ by smashing the ⭐.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falihaider78222%2Fdynamic_tabbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falihaider78222%2Fdynamic_tabbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falihaider78222%2Fdynamic_tabbar/lists"}