{"id":14969864,"url":"https://github.com/frezyx/group_button","last_synced_at":"2025-04-09T05:09:19.749Z","repository":{"id":40456653,"uuid":"286380425","full_name":"Frezyx/group_button","owner":"Frezyx","description":":sweat_drops: Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.","archived":false,"fork":false,"pushed_at":"2024-09-19T15:49:02.000Z","size":26783,"stargazers_count":295,"open_issues_count":12,"forks_count":44,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T05:09:08.687Z","etag":null,"topics":["android-ui","button","buttons","buttons-collection","dart","flutter","flutter-button","flutter-material","flutter-ui","flutter-widget","flutter-widgets","group","ui","widget","widget-library"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/group_button","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/Frezyx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-08-10T05:02:33.000Z","updated_at":"2025-03-12T18:54:52.000Z","dependencies_parsed_at":"2024-01-09T09:48:22.271Z","dependency_job_id":"27d95548-856f-49a2-9eb2-229c11e5ea93","html_url":"https://github.com/Frezyx/group_button","commit_stats":{"total_commits":328,"total_committers":17,"mean_commits":"19.294117647058822","dds":"0.13109756097560976","last_synced_commit":"cf407a1057e8fa537e3cd505e65117406d8937f1"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frezyx%2Fgroup_button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frezyx%2Fgroup_button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frezyx%2Fgroup_button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frezyx%2Fgroup_button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Frezyx","download_url":"https://codeload.github.com/Frezyx/group_button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"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-ui","button","buttons","buttons-collection","dart","flutter","flutter-button","flutter-material","flutter-ui","flutter-widget","flutter-widgets","group","ui","widget","widget-library"],"created_at":"2024-09-24T13:42:32.321Z","updated_at":"2025-04-09T05:09:19.731Z","avatar_url":"https://github.com/Frezyx.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/Frezyx/group_button/blob/master/example/rep_files/new/logo.svg?raw=true\" width=\"400px\"\u003e\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003e Flutter widget to create a group of buttons fast 🚀 \u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\nIncluded Radio and CheckBox buttons models with custom groping types 🤤\n   \u003cbr\u003e\n   \u003cspan style=\"font-size: 0.9em\"\u003e Show some ❤️ and \u003ca href=\"https://github.com/Frezyx/group_button\"\u003estar the repo\u003c/a\u003e to support the project! \u003c/span\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pub.dev/packages/group_button\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/group_button.svg\" alt=\"Pub\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License: MIT\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/Frezyx/group_button\"\u003e\u003cimg src=\"https://hits.dwyl.com/Frezyx/group_button.svg?style=flat\" alt=\"Repository views\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/Frezyx/group_button\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/Frezyx/group_button?style=social\" alt=\"Pub\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pub.dev/packages/group_button/score\"\u003e\u003cimg src=\"https://img.shields.io/pub/likes/group_button?logo=flutter\" alt=\"Pub likes\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://pub.dev/packages/group_button/score\"\u003e\u003cimg src=\"https://img.shields.io/pub/popularity/group_button?logo=flutter\" alt=\"Pub popularity\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://pub.dev/packages/group_button/score\"\u003e\u003cimg src=\"https://img.shields.io/pub/points/group_button?logo=flutter\" alt=\"Pub points\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\n\n|    ![](https://github.com/Frezyx/group_button/blob/master/example/rep_files/new/e1.gif?raw=true)     |    ![](https://github.com/Frezyx/group_button/blob/master/example/rep_files/new/e2.gif?raw=true)     | ![](https://github.com/Frezyx/group_button/blob/master/example/rep_files/new/e3.gif?raw=true) |\n| :------------------------------: | :------------------------------: | :------------------------------: |\n\n| GroupButtonController | GroupButtonBuilder | GroupButtonOptions |\n| :------------------------------: | :------------------------------: | :------------------------------: |\n\n\n## Getting Started\nFollow these steps to use this package\n\n### Add dependency\n\n```yaml\ndependencies:\n  group_button: ^5.4.0\n```\n\n### Add import package\n\n```dart\nimport 'package:group_button/group_button.dart';\n```\n\n### Easy to use\nSimple example of use GroupButton\u003cbr\u003e\nPut this code in your project at an screen and learn how it works 😊\n\n```dart\nGroupButton(\n    isRadio: false,\n    onSelected: (index, isSelected) =\u003e print('$index button is selected'),\n    buttons: [\"12:00\", \"13:00\", \"14:30\", \"18:00\", \"19:00\", \"21:40\"],\n)\n```\n\n### Controller\n**Starting from version 4.1.0** \u003cbr\u003e\nYou can control your Group Button using the controller\n\n```dart\nfinal controller = GroupButtonController();\n\nColumn(\n  children: [\n    GroupButton.checkbox(\n      controller: controller,\n      buttons: ['12:00', '13:00', '14:00'],\n      onSelected: (i, selected) =\u003e debugPrint('Button #$i $selected'),\n    ),\n    TextButton(\n      onPressed: () =\u003e controller.selectIndex(1),\n      child: const Text('Select 1 button'),\n    )\n  ],\n),\n```\n\n### Generic button value\nIn new 5.0.0 version you can set custom buttons value type \u003cbr\u003e\nIt can be int, DateTime, double or YourCustomClass \u003cbr\u003e\nButton text will be result of .toString() model method in common button display case \u003cbr\u003e\n```dart\nGroupButton\u003cDateTime\u003e(\n  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],\n)\n```\n\n### Button builders\n\nAlso you can use generic button values with cutsom buttonBuilder \u003cbr\u003e\nIn order to turn values into any widget\n```dart\nGroupButton\u003cDateTime\u003e(\n  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],\n  buttonBuilder: (selected, date, context) {\n    return Text('${date.year}-${date.month}-${date.day}');\n  },\n),\n```\n\nIn this package, there are four different possibilities for customizing your buttons through builders\n\n- 1 **buttonBuilder** It will build a fully custom button based on the value parameter\n- 2 **buttonIndexedBuilder** same as buttonBuilder. But based on button index. \n- 3 **buttonTextBuilder** It will replace the text of your button, which is constructed based on the style parameters passed in GroupButtonOptions. The appearance of the button remains the same, but the text is changed. Based on button value. \n- 4 **buttonIndexedTextBuilder** same as buttonTextBuilder. But based on button index. \n\n### Fully Customize\nIn order to customize your buttons inside *GroupButton* you can use *GroupButtonOptions*\n\n```dart\nGroupButtonOptions(\n  selectedShadow: const [],\n  selectedTextStyle: TextStyle(\n    fontSize: 20,\n    color: Colors.pink[900],\n  ),\n  selectedColor: Colors.pink[100],\n  unselectedShadow: const [],\n  unselectedColor: Colors.amber[100],\n  unselectedTextStyle: TextStyle(\n    fontSize: 20,\n    color: Colors.amber[900],\n  ),\n  selectedBorderColor: Colors.pink[900],\n  unselectedBorderColor: Colors.amber[900],\n  borderRadius: BorderRadius.circular(100),\n  spacing: 10,\n  runSpacing: 10,\n  groupingType: GroupingType.wrap,\n  direction: Axis.horizontal,\n  buttonHeight: 60,\n  buttonWidth: 60,\n  mainGroupAlignment: MainGroupAlignment.start,\n  crossGroupAlignment: CrossGroupAlignment.start,\n  groupRunAlignment: GroupRunAlignment.start,\n  textAlign: TextAlign.center,\n  textPadding: EdgeInsets.zero,\n  alignment: Alignment.center,\n  elevation: 0,\n),\n```\n\n![](https://github.com/Frezyx/group_button/blob/master/example/rep_files/options_example.png?raw=true) \n\n### Examples\nYou can check more examples of using this package [here](example/lib)\n\n\u003cbr\u003e\n\u003cdiv align=\"center\" \u003e\n  \u003cp\u003eThanks to all contributors of this package\u003c/p\u003e\n  \u003ca href=\"https://github.com/Frezyx/group_button/graphs/contributors\"\u003e\n    \u003cimg src=\"https://contrib.rocks/image?repo=Frezyx/group_button\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\nFor help getting started with 😍 Flutter, view\n[online documentation](https://flutter.dev/docs), which offers tutorials, \nsamples, guidance on mobile development, and a full API reference.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrezyx%2Fgroup_button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrezyx%2Fgroup_button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrezyx%2Fgroup_button/lists"}