Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Overview

Flutter widget to create a group of buttons fast ๐Ÿš€

Included Radio and CheckBox buttons models with custom groping types ๐Ÿคค
Show some โค๏ธ and star the repo to support the project!


Pub Star on Github License: MIT

Pub likes Pub popularity Pub points

Image Image Image

Getting Started

Follow these steps to use this package

Add dependency

dependencies:
  group_button: ^3.3.1 #latest version

Add import package

import 'package:group_button/group_button.dart';

Easy to use

Simple example of use GroupButton
Put this code in your project at an screen and learn how it works ๐Ÿ˜Š

GroupButton(
    isRadio: false,
    spacing: 10,
    onSelected: (index, isSelected) => print('$index button is selected'),
    buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40"],
)

Customize

In order to customize your buttons inside GroupButton you can use code below
This code includes all the fields used in GroupButton

] after 2.2.1 version selectedTextStyle: TextStyle( fontWeight: FontWeight.w600, fontSize: 16, color: Colors.red, ), unselectedTextStyle: TextStyle( fontWeight: FontWeight.w600, fontSize: 14, color: Colors.grey[600], ), selectedColor: Colors.white, unselectedColor: Colors.grey[300], selectedBorderColor: Colors.red, unselectedBorderColor: Colors.grey[500], borderRadius: BorderRadius.circular(5.0), selectedShadow: [BoxShadow(color: Colors.transparent)], unselectedShadow: [BoxShadow(color: Colors.transparent)], )">
GroupButton(
    spacing: 5,
    isRadio: false,
    direction: Axis.horizontal,
    onSelected: (index, isSelected) =>
          print('$index button is ${isSelected ? 'selected' : 'unselected'}'),
    buttons: ["Dart","Kotlin","Java","Swift","Objective-C","Python","JS"],
    selectedButtons: [0, 1], /// [List
      
       ]
       after 2.2.1 version 
    selectedTextStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 16,
        color: Colors.red,
    ),
    unselectedTextStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 14,
        color: Colors.grey[600],
    ),
    selectedColor: Colors.white,
    unselectedColor: Colors.grey[300],
    selectedBorderColor: Colors.red,
    unselectedBorderColor: Colors.grey[500],
    borderRadius: BorderRadius.circular(5.0),
    selectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
    unselectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
)

Examples

You can check more examples of using this package here


Attributes

Attribute Annotation
buttons [String] list that will be displayed on buttons in the [GroupButton]
selectedButtons [List] that will be set initial selected buttons in the [GroupButton] when [isRadio] is false
selectedButton [int] that will be set initial selected button in the [GroupButton] when [isRadio] is true
onSelected Callback [Function] works by clicking on a group element
Return int [index] of selected button and [isSelected] if [isRadio] = false
isRadio bool variable for switching between modes [ChackBox] and [Radio]
if the [isRadio] = true, only one button can be selected
if the [isRadio] = false, you can select several at once
direction The direction of arrangement of the buttons in [GroupButton]
spacing The spacing between buttons inside [GroupButton]
runSpacing When [groupingType] is [GroupingType.wrap] this field sets Wrap [runSpacing]
selectedTextStyle [TextStyle] of text of selected button(s)
unselectedTextStyle [TextStyle] of text of unselected buttons
selectedColor background [Color] of selected button(s)
unselectedColor background [Color] of unselected buttons
selectedBorderColor border [Color] of selected button(s)
unselectedBorderColor border [Color] of unselected buttons
borderRadius [BorderRadius] of buttons
How much the button will be rounded
selectedShadow list of selected button(s) [BoxShadow]
unselectedShadow list of unselected buttons [BoxShadow]
groupingType The field is responsible for how the buttons will be grouped [GroupingType]
mainGroupAlignment How the buttons should be placed in the main axis in a layout [MainGroupAlignment]
crossGroupAlignment How the buttons should be placed along the cross axis in a layout [CrossGroupAlignment]
groupRunAlignment How the button runs themselves should be placed the cross axis in a layout [GroupRunAlignment]
textAlign The buttons text alignment [GroupButton]
textPadding The inner padding of buttons [GroupButton]
alignment [AlignmentGeometry] Text position inside the buttons in case [buttonWidth] or [buttonHeight] defined
elevation [double] The buttons' elevation
disabledButtons [int] button ids that are disabled

Thanks to all contributors of this package


For help getting started with ๐Ÿ˜ Flutter, view online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Comments
  • When isRadio is true it starts with first button selected

    When isRadio is true it starts with first button selected

    When I user isRadio=true I expect the options to be rendered with all button unselected. That would match how radio buttons work in HTML for example.

    Right now, the first option is selected. In the example below, button A is selected automatically.

    GroupButton(
                isRadio: true,
                spacing: 10,
                onSelected: (index, isSelected) => setState(
                    () => choiceSelectionOutput = widget.optionsOutputText[index]),
                buttons: ["A","B", "C"]
            )
    
    opened by roberto77mi 10
  • SelectedButtons is not getting the correct selected button

    SelectedButtons is not getting the correct selected button

    I'm trying to make a form using this package and Riverpod.

    Right now i'm trying to keep the button selected between different groups, but it does not: image As you can see, both different questions can have different values, and they are saved, but when i try to keep each one for each question, both widgets keeps the same selected value: Record_player_20210420201527 It seems to keep the same index ever, as if always it would be the same widget, what is we don't want.

    opened by SalahAdDin 7
  • "Old school" style.

    Hi, thanks for this good alternative that can fulfill our needs.

    I'm working on reproduce this questionary application, and I'm using this package as an alternative to grouped_buttons.

    I would like to know if it is possible to get the oldschool style for checkbox(box) and radio buttons whit this package.

    is there any way to do it with the current state of the package? Does it require a new feature?

    Thank you very much.

    opened by SalahAdDin 4
  • Updated non-existing attribute of elevated button

    Updated non-existing attribute of elevated button

    I updated to the latest version of your dependency and faced error like "non-existing elevated button attribute". I did little changes and it works now. Thanks

    opened by murat-ti 3
  • group_button_item.dart:91:9: Error: No named parameter with the name 'backgroundColor'.         backgroundColor: _getBackgroundColor(theme),         ^^^^^^^^^^^^^^^

    group_button_item.dart:91:9: Error: No named parameter with the name 'backgroundColor'. backgroundColor: _getBackgroundColor(theme), ^^^^^^^^^^^^^^^

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: [e.g. iOS]
    • Browser [e.g. chrome, safari]
    • Version [e.g. 22]

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here.

    opened by patrakaibalya 3
  • Question: Horizontal scrolling GroupButton (e.g. for creating

    Question: Horizontal scrolling GroupButton (e.g. for creating "quick search buttons")

    I'm trying to add "quick search buttons" to my flutter app like (in red):

    image

    This packages looks great for the button part of this, but I'm struggling to make the GroupButton horizontal scrollable. I can achieve this using a ListView.separated, e.g. (from https://stackoverflow.com/a/71386591/5179470)

    ListView.separated(
                    itemCount: fruits.length,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context, index) => FilterChip(
                      label: Text(fruits[index]),
                      selected: index == selectedIndex,
                      onSelected: (value) {
                        setState(() {
                          selectedIndex = index;
                        });
                      },
                    ),
    

    but I can't seem to get a GroupButton to work with this. This issue looks related: https://github.com/Frezyx/group_button/issues/21 (mentioning @YouSour in case they have got it to work).

    Many thanks for any help, and for this amazing lib!! :)

    opened by asmith26 3
  • PROPOSAL: Provide a GroupButtonOptions as an immutable class for configuration purpose

    PROPOSAL: Provide a GroupButtonOptions as an immutable class for configuration purpose

    @Frezyx

    Adding an object like: GroupButtonOptions(TextAlign, Padding, etc...)

    This will make easier to add option(s) in the future and make the source code more readable. So we pass one object throw the classes hierarchy instead of duplicating variable across classes, this will make the maintenance of the library more easy.

    enhancement help wanted in progress 
    opened by wer-mathurin 3
  • Add ability to unselect a radio button by pressing it again (toggleable property)

    Add ability to unselect a radio button by pressing it again (toggleable property)

    Flutter Radio Buttons have a Toggleable property, allowing a user to unselect it as required.

    I would love it this fantastic lib could support this. Many thanks for any help! :)

    opened by asmith26 2
  • Question: Color code buttons based on their value

    Question: Color code buttons based on their value

    Hi there,

    I'm hoping to color code my buttons based on their value, e.g.

    image

    Is this possible/is there any example code you can point me to?

    Thanks for any help, and for this amazing lib! :)

    opened by asmith26 2
  • How to have buttons take up available parent width

    How to have buttons take up available parent width

    This is more of a question - but I am placing a GroupButton with two buttons in an Expanded inside of a row, and I expected them to automatically fill out the available width of the Expanded widget but they don't.

    How can I do this? I don't want to have to explicitly set the button widths.

    opened by banderberg 2
  • add controller to group button

    add controller to group button

    add controller to group button, so can get selectIndex or select Indexes from controller or setsetSelectedIndex/setSelectedIndexes to change selectButton/selectButtons.

    opened by bookyo 2
  • Please add an option from which we can choose classic/regular/old  Radio and Checkbox .

    Please add an option from which we can choose classic/regular/old Radio and Checkbox .

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    opened by VIP-Dev-Invisible 0
  • Deselect stops working when controller is added

    Deselect stops working when controller is added

    Hi, thanks for a great plugin.

    I use it in a custom FormBuilderField, and needed a way to initialize selected buttons. It wasn't obvious how to set init values, but eventually I made it by adding GroupButtonController. All worked well until I discovered that deselecting buttons stopped working.

    If I remove controller, deselecting works again (but no way to set init values).

    Any hints on what can be wrong? Is it a bug or I'm doing something wrong? (maybe there is a way to preselect buttons without controller?)

    opened by divan 8
  • Disable splash affect and control animation duration

    Disable splash affect and control animation duration

    Would be great to have an option where the button splash affect can be disabled. Another good feature would be to control the duration of the select animation on the button. Is there a workaround?

    opened by MeshariA 2
  • _GroupButtonBodyState.initState() minor bug

    _GroupButtonBodyState.initState() minor bug

    class _GroupButtonBodyState extends State<GroupButtonBody> {
      @override
      void initState() {
        super.initState();
    
        if (!widget.isRadio) {
          widget.controller.toggleIndexes(widget.selectedButtons ?? []); // <<< has to be selectIndexes
        }
    

    Because the following code is not working properly:

    GroupButton(
      selectedButtons: selected,
      controller: GroupButtonController()..selectIndexes(selected),
    

    It's oversimplified example, the point is that you cannot set properly synchronized selectedButtons and controller.

    opened by slavap 0
Releases(5.2.2)
Owner
Stanislav Ilin
Your code's boyfriend
Stanislav Ilin
A library to easily create radio button and checkbox groups.

Check/Radio Group A library to easily create radio button and checkbox groups. Define font size, selection color, position of radios / check and text

Caiubi Tech 2 Jan 6, 2021
Cupertino buttons which are used as radio buttons in order to select one value

Flutter Cupertino Radio Choice Cupertino buttons which are used as radio buttons in order to select one value. Tutorial A complete tutorial how to use

Christoph Rothermel 4 Sep 18, 2022
Fancy design of radio buttons in Flutter (package).

A Flutter package for new radio button design. With Elegant Animation. Features Usage TODO: Include short and useful examples for package users. Add l

Aymen Boucheffa 0 Nov 26, 2021
Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Vลฉ Phฦฐฦกng 2 Jul 4, 2022
Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

null 6 Dec 10, 2022
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Anon 18 Dec 16, 2022
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
Displays a scrollable timeline with custom child widgets and custom icons.

Flutter Timeline Widget Displays a scrollable timeline with custom child widgets and custom icons. Installation In your pubspec.yaml file within your

Furkan Tektas 375 Nov 20, 2022
Custom-Position-Popup - Custom Position Popup For Flutter

Custom-Position-Popup before clone the GitHub repository please give a star on t

Blackshadow Software Ltd 11 Oct 17, 2022
A widget for swiping through a deck of cards with gestures or buttons.

swiping_card_deck A widget for swiping through a deck of cards with gestures or buttons. This package was inspired when I was trying to develop a Tind

Justin Hutchins 8 Oct 17, 2022
Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Stanislav Ilin 43 Dec 7, 2022
A Flutter widget which synchronize a ScrollView and a custom tab view

scrollable_list_tabview A Flutter widget which synchronize a ScrollView and a custom tab view. The main idea is to create a custom tab view synchroniz

Aswanath C K 0 Apr 12, 2022
Custom bottom sheet widget, that can resize by drag and then scroll.

Bottom Sheet This package is part of the SurfGear toolkit made by Surf. About Custom bottom sheet widget that can be resized in response to drag gestu

Surf 92 Dec 16, 2022
Customizable Material and Cupertino buttons with progress indicators and more

future_button Customizable Material and Cupertino buttons with progress indicators and more.

Erzhan 33 Oct 13, 2022
NumberPicker is a custom widget designed for choosing an integer or decimal number by scrolling spinners.

NumberPicker NumberPicker is a custom widget designed for choosing an integer or decimal number by scrolling spinners. Example: (See example for more)

Marcin Szaล‚ek 273 Nov 4, 2022
"wi_custom_bar" - a custom bar widget that implements a thermometer gauge bar created by wannai team

About wi_custom_bar "wi_custom_bar" is a custom bar widget that implements a thermometer gauge bar created by wannai team. Installing: In your pubspec

null 3 Feb 23, 2022
Create beautiful Loading and Timer buttons in Flutter

Argon Buttons (Timer and Loading) Create beautiful Loading and Timer buttons using Argon Buttons. No need to worry about handling animations or timers

Yogesh 213 Dec 11, 2022
pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

ฤmฤrl 18 Dec 30, 2022