{"id":16162619,"url":"https://github.com/jgeek00/segmented-button-slide","last_synced_at":"2025-03-18T22:31:10.814Z","repository":{"id":268249351,"uuid":"710018380","full_name":"JGeek00/segmented-button-slide","owner":"JGeek00","description":"Flutter package. Segmented button with slider indicator based on the iOS one, but adapted to the Material UI.","archived":false,"fork":false,"pushed_at":"2024-07-29T22:04:03.000Z","size":1055,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-28T12:33:01.538Z","etag":null,"topics":["dart","flutter","material","package","segmented-button"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/segmented_button_slide","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JGeek00.png","metadata":{},"created_at":"2023-10-25T20:58:31.000Z","updated_at":"2024-07-31T19:43:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"cfbd3310-7f46-4682-8f98-dad937295441","html_url":"https://github.com/JGeek00/segmented-button-slide","commit_stats":null,"previous_names":["jgeek00/segmented-button-slide"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JGeek00%2Fsegmented-button-slide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JGeek00%2Fsegmented-button-slide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JGeek00%2Fsegmented-button-slide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JGeek00%2Fsegmented-button-slide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JGeek00","download_url":"https://codeload.github.com/JGeek00/segmented-button-slide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243950927,"owners_count":20373664,"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":["dart","flutter","material","package","segmented-button"],"created_at":"2024-10-10T02:31:37.947Z","updated_at":"2025-03-18T22:31:10.810Z","avatar_url":"https://github.com/JGeek00.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Segmented Button Slide\n\n\u003cdiv align=\"center\" style=\"height: 100px\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/JGeek00/segmented-button-slide/master/assets/demo.gif\" alt=\"Segmented Button Slide demo\" /\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\nSegmented Button Slide takes inspiration from the iOS segmented button, adapting it to the Material interface.\n\n### How to use it\nInstall it by running the following command.\n```\nflutter pub add segmented_button_slide\n```\n\n#### Full example\nBy default it takes as much width as it can, so it's a good idea to wrap it inside a widget with a defined width.\n\n```dart\nint selectedOption = 0;\n\n...\n\nSegmentedButtonSlide(\n  selectedEntry: selectedOption,\n  onChange: (selected) =\u003e setState(() =\u003e selectedOption = selected),\n  entries: const [\n    SegmentedButtonSlideEntry(\n      icon: Icons.home_rounded,\n      label: \"Home\",\n    ),\n    SegmentedButtonSlideEntry(\n      icon: Icons.list_rounded,\n      label: \"List\",\n    ),\n    SegmentedButtonSlideEntry(\n      icon: Icons.settings_rounded,\n      label: \"Settings\",\n    ),\n  ],\n  colors: SegmentedButtonSlideColors(\n    barColor: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.5),\n    backgroundSelectedColor: Theme.of(context).colorScheme.primaryContainer,\n  ),\n  slideShadow: [\n    BoxShadow(\n      color: Colors.blue.withOpacity(1),\n      blurRadius: 5,\n      spreadRadius: 1,\n    )\n  ],\n  margin: const EdgeInsets.all(16),\n  height: 70,\n  padding: const EdgeInsets.all(16),\n  borderRadius: BorderRadius.circular(8),\n  selectedTextStyle: const TextStyle(\n    fontWeight: FontWeight.w700,\n    color: Colors.green,\n  ),\n  unselectedTextStyle: const TextStyle(\n    fontWeight: FontWeight.w400,\n    color: Colors.red,\n  ),\n  hoverTextStyle: const TextStyle(\n    color: Colors.orange,\n  ),\n),\n```\n\n#### Detailed explanation\n* **[REQUIRED] ``entries``** accepts a list of ``SegmentedButtonSlideEntry``. Each ``SegmentedButtonSlideEntry`` is formed by an icon and a label. You must declare at least one of the two.\n* **[REQUIRED] ``selectedEntry``** accepts an ``int``. Defines the item that's currently selected.\n* **[REQUIRED] ``onChange``** returns the selected value when the user changes the selection.\n* **[REQUIRED] ``colors``** accepts an instance of ``SegmentedButtonSlideColors``. All of it's attributes are mandatory. \n  * ``barColor`` defines the background color of the full bar.\n  * ``backgroundSelectedColor`` defines the background color of the item that's currently selected.\n* **``slideShadow``** defines the boxShadow of the slider (item that's currently selected).\n* **``barShadow``** defines the boxShadow of the full bar (the background).\n* **``margin``** creates a margin around the whole widget.\n* **``height``** defines the height of the widget.\n* **``fontSize``** sets the fontSize of the text. It doesn't affect to the icon.\n* **``iconSize``** sets the size of the icon. It doesn't affect to the text.\n* **``textOverflow``** defines how the text (only) should overflow.\n* **``animationDuration``** defines the duration of all the animations of the widget. By default it's set to 250 milliseconds.\n* **``curve``** defines the curve of all the animations of the widget. By default it's set to ``ease``.\n* **``padding``** defines the distance between the selectable items and the outer container.\n* **``borderRadius``** defines the border radius for the outer container and for the individual items.\n* **``selectedTextStyle``** accepts a ``TextStyle`` object that defines the style for the icon and the text when the option is selected.\n* **``unselectedTextStyle``** accepts a ``TextStyle`` object that defines the style for the icon and the text when the option is not selected.\n* **``hoverTextStyle``** accepts a ``TextStyle`` object that defines the style for the icon and the text when the option is hovered.\n\n#### Migration from v1 to v2\nSegmented button slide v2 includes some breaking changes.\n* ``foregroundSelectedColor``, ``foregroundUnselectedColor`` and ``hoverColor`` have been removed.\n* Now you can define that three colors with the ``selectedTextStyle``, ``unselectedTextStyle`` and ``hoverTextStyle`` attributes.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgeek00%2Fsegmented-button-slide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgeek00%2Fsegmented-button-slide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgeek00%2Fsegmented-button-slide/lists"}