{"id":13550528,"url":"https://github.com/afonsocraposo/buttons_tabbar","last_synced_at":"2026-02-25T04:40:49.899Z","repository":{"id":37241209,"uuid":"258500986","full_name":"afonsocraposo/buttons_tabbar","owner":"afonsocraposo","description":"A Flutter package that implements a TabBar where each label is a toggle button.","archived":false,"fork":false,"pushed_at":"2024-12-26T09:06:03.000Z","size":1482,"stargazers_count":107,"open_issues_count":0,"forks_count":34,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-26T10:17:50.771Z","etag":null,"topics":["android","button","dart","flutter","flutter-package","flutter-ui","flutter-widget","ios","mobile","package","tab","tabbar","ui","ui-components","ui-design"],"latest_commit_sha":null,"homepage":"https://pub.dev/documentation/buttons_tabbar/latest/","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/afonsocraposo.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-04-24T12:04:17.000Z","updated_at":"2024-12-26T09:04:36.000Z","dependencies_parsed_at":"2024-05-17T11:28:59.041Z","dependency_job_id":"097b7bf6-0144-4a3b-8334-73230d53d5e8","html_url":"https://github.com/afonsocraposo/buttons_tabbar","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":0.03448275862068961,"last_synced_commit":"ade4483baf175df2b350deaecf3a7bb23ab1aef4"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsocraposo%2Fbuttons_tabbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsocraposo%2Fbuttons_tabbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsocraposo%2Fbuttons_tabbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afonsocraposo%2Fbuttons_tabbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afonsocraposo","download_url":"https://codeload.github.com/afonsocraposo/buttons_tabbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246916734,"owners_count":20854511,"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","button","dart","flutter","flutter-package","flutter-ui","flutter-widget","ios","mobile","package","tab","tabbar","ui","ui-components","ui-design"],"created_at":"2024-08-01T12:01:34.358Z","updated_at":"2025-10-23T07:01:50.486Z","avatar_url":"https://github.com/afonsocraposo.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Buttons TabBar\n\n[![Publish](https://github.com/afonsocraposo/buttons_tabbar/actions/workflows/release.yml/badge.svg)](https://github.com/afonsocraposo/buttons_tabbar/actions/workflows/release.yml)\n[![Pub](https://img.shields.io/pub/v/buttons_tabbar.svg)](https://pub.dev/packages/buttons_tabbar)\n\nButtons TabBar is an open-source Flutter package that provides a tabbar where each tab indicator is a toggle button. It allows you to create interactive and customizable tab bars for your Flutter applications.\n\n![ButtonsTabBar screen animation](https://raw.githubusercontent.com/Afonsocraposo/buttons_tabbar/master/doc/screenshots/screen2.gif)\n\n## Features\n\n✨ Each tab indicator is a toggle button\n🎨 Customizable appearance and behavior\n🖌️ Supports various styling options, including background color, border color, label style, icon color, and more\n🚀 Smooth transition animations\n📱 Works like a native TabBar\n⚙️ Simple and easy to use configuration with a wide range of parameters\n\n## Installation\n\nTo use Buttons TabBar in your Flutter project, follow these steps:\n\n1. Add the dependency to your `pubspec.yaml` file:\n\n```yaml\ndependencies:\n flutter:\n sdk: flutter\n buttons_tabbar: ^1.3.14\n```\n\n2. Run `flutter pub get` to install the package.\n\n## Usage\n\nImport the package in your Dart file and customize the tab bar according to your needs:\n\n```dart\nimport 'package:buttons_tabbar/buttons_tabbar.dart';\n\nDefaultTabController(\n length: ...,\n child: Column(\n children: \u003cWidget\u003e[\n ButtonsTabBar(\n // Customize the appearance and behavior of the tab bar\n backgroundColor: Colors.red,\n borderWidth: 2,\n borderColor: Colors.black,\n labelStyle: TextStyle(\n color: Colors.white,\n fontWeight: FontWeight.bold,\n ),\n unselectedLabelStyle: TextStyle(\n color: Colors.black,\n fontWeight: FontWeight.bold,\n ),\n // Add your tabs here\n tabs: ...,\n ),\n Expanded(\n child: TabBarView(\n children: ...,\n ),\n ),\n ],\n ),\n)\n```\n\n## Examples\n\nHere are a few examples of how you can use Buttons TabBar:\n\n#### Example #1\n\n![ButtonsTabBar - Example #1](https://raw.githubusercontent.com/Afonsocraposo/buttons_tabbar/master/doc/screenshots/example1.jpg)\n\n```dart\nDefaultTabController(\n length: ...,\n child: Column(\n children: \u003cWidget\u003e[\n ButtonsTabBar(\n backgroundColor: Colors.red,\n tabs: ...,\n ),\n Expanded(\n child: TabBarView(\n children: ...,\n ),\n ),\n ],\n ),\n)\n```\n\n#### Example #2\n\n![ButtonsTabBar - Example #2](https://raw.githubusercontent.com/Afonsocraposo/buttons_tabbar/master/doc/screenshots/example2.jpg)\n\n```dart\nDefaultTabController(\n length: ...,\n child: Column(\n children: \u003cWidget\u003e[\n ButtonsTabBar(\n backgroundColor: Colors.blue[600],\n unselectedBackgroundColor: Colors.white,\n labelStyle: TextStyle(\n color: Colors.white,\n fontWeight: FontWeight.bold,\n ),\n unselectedLabelStyle: TextStyle(\n color: Colors.blue[600],\n fontWeight: FontWeight.bold,\n ),\n borderWidth: 1,\n unselectedBorderColor: Colors.blue[600],\n radius: 100,\n tabs: ...,\n ),\n Expanded(\n child: TabBarView(\n children: ...,\n ),\n ),\n ],\n ),\n)\n```\n\n#### Example #3\n\n![ButtonsTabBar - Example #3](https://raw.githubusercontent.com/Afonsocraposo/buttons_tabbar/master/doc/screenshots/example3.jpg)\n\n```dart\nDefaultTabController(\n length: 6,\n child: Column(\n children: \u003cWidget\u003e[\n ButtonsTabBar(\n radius: 12,\n contentPadding: EdgeInsets.symmetric(horizontal: 12),\n borderWidth: 2,\n borderColor: Colors.transparent,\n center: true,\n decoration: BoxDecoration(\n gradient: LinearGradient(\n colors: \u003cColor\u003e[\n Color(0xFF0D47A1),\n Color(0xFF1976D2),\n Color(0xFF42A5F5),\n ],\n ),\n ),\n unselectedLabelStyle: TextStyle(color: Colors.black),\n labelStyle: TextStyle(color: Colors.white),\n height: 56,\n tabs: ...,\n ),\n Expanded(\n child: TabBarView(\n children: ...,\n ),\n ),\n ],\n ),\n)\n```\n\nFor more examples, please refer to the [example.dart](https://github.com/Afonsocraposo/buttons_tabbar/tree/master/example/example.dart) file.\n\n## Properties\n\nBelow are the properties available for customizing the ButtonsTabBar. For more detailed information, check the [API reference]().\n\n| Property | Type | Description | Default |\n| -------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |\n| backgroundColor | `Color` | The background color of the button on its selected state. | `Theme.of(context).accentColor` |\n| borderColor | `Color` | The border color of the button on its selected state. | `Colors.black` |\n| borderWidth | `double` | The width of the solid border for each button. | `0` |\n| buttonMargin | `EdgeInsets` | The `EdgeInsets` used for the margin of the buttons. | `EdgeInsets.all(4.0)` |\n| center | `bool` | Center the tab buttons. | `false` |\n| contentPadding | `EdgeInsets` | The `EdgeInsets` used for the padding of the buttons' content. | `EdgeInsets.symmetric(horizontal: 4.0)` |\n| controller | `TabController` | This widget's selection and animation state. | `DefaultTabController.of` |\n| decoration | `BoxDecoration` | The `BoxDecoration` of the button on its selected state. | `null` |\n| duration | `int` | The duration in milliseconds of the transition animation. | `250` |\n| elevation | `double` | The value of elevation applied to each button. | `0` |\n| height | `double?` | Override the default height. | `46.0` |\n| labelSpacing | `double` | The spacing between the icon and the text. If only one of those is provided, no spacing is applied. | `4.0` |\n| labelStyle | `TextStyle` | The `TextStyle` of the button's text on its selected state. The color provided on the TextStyle will be used for the icon's color. | `TextStyle(color: Colors.white)` |\n| onTap | `void Function(int)?` | An optional callback that's called when the TabBar is tapped. | `null` |\n| physics | `ScrollPhysics` | The physics used for the `ScrollController` of the tabs list. | `BouncingScrollPhysics()` |\n| radius | `double` | The value of the `BorderRadius.circular` applied to each button. | `7.0` |\n| splashColor | `Color?` | The splash color of the button. | `null` |\n| tabs | `List\u003cWidget\u003e` | The tabs to display. Typically a list of two or more `Tab` widgets. | **`@required`** |\n| unselectedBackgroundColor | `Color` | The background color of the button on its unselected state. | `Colors.grey[300]` |\n| unselectedBorderColor | `Color` | The border color of the button on its unselected state. If it's value is `null`, the `Color` of `borderColor` is used. | `null` |\n| unselectedDecoration | `BoxDecoration` | The `BoxDecoration` of the button on its unselected state. | `null` |\n| unselectedLabelStyle | `TextStyle` | The `TextStyle` of the button's text on its unselected state. The color provided on the TextStyle will be used for the icon's color. | `TextStyle(color: Colors.black)` |\n\n## Apps Using Buttons TabBar\n\nHere are some apps that are using Buttons TabBar to create engaging and interactive tab bars:\n\n1. [Spotube](https://github.com/KRTirtho/spotube) - Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop \u0026 mobile!\n![Spotube](https://github.com/KRTirtho/spotube/raw/master/assets/spotube-screenshot.png)\n\nIf you are using Buttons TabBar in your app and would like to showcase it here, please let us know. We would be happy to feature your app as well.\n\nPlease note that the above apps are provided as examples and may not be actively maintained or associated with the Buttons TabBar package.\n\n## Future Development\n\nIf you have any suggestions or encounter any issues, feel free to let me know. I am committed to improving and maintaining this package.\n\n## License\n\nThis package is licensed under the MIT License. For more information, see the [LICENSE.md](https://github.com/Afonsocraposo/buttons_tabbar/tree/master/LICENSE) file.\n\n## More Information\n\nFor more information, visit the [Buttons TabBar GitHub repository](https://github.com/Afonsocraposo/buttons_tabbar) or [the author's website](https://afonsoraposo.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafonsocraposo%2Fbuttons_tabbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafonsocraposo%2Fbuttons_tabbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafonsocraposo%2Fbuttons_tabbar/lists"}