Flutter widget to create a group of buttons fast ✈️
Tags: flutter, dart, opensource, android
Published: 2022-03-07 21:21:04

## How often you see buttons in applications🧐?
I think in every application that you seen in life.
And buttons are different

| Like that | Or like that | Or like that if your designer is stuck in the past |
| :------------------------------: | :------------------------------: | :------------------------------: |
| ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b41260pec6khkc3f8ub.png) | ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0m7cdnn6vbw1muqbee6.png) | ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fq3immgodpetufi4bxtb.png) |

But all these buttons are often grouped together for some purposes. 

| For multiselect forms | Select gender |
| :------------------------------: | :------------------------------: |
| ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj18wb63tjs3pjivhtn4.png) | ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvcq6r9dcfgz54wcezod.png) |
| For filters | Another selection |
| ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hj7dv7ol7jmodkx9btjg.png) | ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5t6f8aqz549frobpukum.png) |

And a lot of other cases...

## And how to make similar widgets in Flutter ?

Flutter have base Radio widget for select one of all items logic. 
It is very easy to use. 
You need to tell the value of this element and the current selected value for the entire group

```dart
Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      ListTile(
        title: Text("Male"),
        leading: Radio(
          value: 1,
          groupValue: val,
          onChanged: (value) {
            setState(() {
              val = value;
            });
          },
          activeColor: Colors.green,
        ),
      ),
      ListTile(
        title: Text("Female"),
        leading: Radio(
          value: 2,
          groupValue: val,
          onChanged: (value) {
            setState(() {
              val = value;
            });
          },
          activeColor: Colors.green,
        ),
      ),
    ],
  )
```

For multiple choice we have a Checkbox.
Everything is not so simple with him, the work of several checkboxes still needs to be organized.
```dart
Checkbox(
  value: false,
  onChanged: (value) {
    setState(() {
      _value = value;
    });
  },
)
```

## What if I don 't want to spend a lot of time releasing similar widgets with logic ?
Or maybe I want to make the widgets custom, not the default Radio or Checkbox ?

**That's why I'm writing this post**
I have created a [library](https://github.com/Frezyx/group_button) to creating the selection buttons in minimum of time.

For example - see how you can make a group of time selection buttons in 5 lines
```dart
GroupButton(
    isRadio: false,
    onSelected: (index, isSelected) => print('$index button is selected'),
    buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40", "22:00", "23:30"],
)
```

**Here result:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1wlnshfo8i8i87t138y.png)

## Well, what if I want to use default checkboxes?
It will be very simple

- First we will put the buttons in a variable and create a controller
- After that we will add a buttonBuilder to build any of your most interesting button UI
- That's all ...

```dart
final _controller = GroupButtonController();

final _buttons = ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40", "22:00", "23:30"];

GroupButton(
  isRadio: false,
  controller: _controller,
  onSelected: (index, isSelected) =>
    print('$index button is selected'),
  buttons: _buttons,
  buttonBuilder: (selected, i, context) => CheckBoxTile(
    title: _buttons[i],
    selected: selected,
    onTap: () => _controller.toggleIndexes([i]),
  ),
),
```

**Here result:**
![Image description](https://github.com/Frezyx/group_button/blob/master/example/rep_files/new/devto_e.gif?raw=true)

I could tell you a lot more about this package, but I think its repository will tell everything instead of me.

## Package link
[GroupButton](https://github.com/Frezyx/group_button) 
Support this project with an ⭐️asterisk on Github. It's not difficult, but it's very nice


## Source code
A full example for this package can be found [here](https://github.com/Frezyx/group_button/tree/master/example/lib)