Flutter widget to create a group of buttons fast ✈️

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

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

For multiselect forms	Select gender
For filters	Another selection

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

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.

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 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

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:

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 ...

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:

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

Package link

GroupButton
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

Comments

[Gracielle Sampaio]

very good, now I want to put into practice the tips!

[Stanislav Ilin]

Cool !
You can start from github.com/Frezyx/group_button/tre...

[Gracielle Sampaio]

Cool, thanks!!!

[Jackson Kasi]

nice✨

[Stanislav Ilin]

Thank you

[Raheem Amer]

Loved it. Thank you <3

[Stanislav Ilin]

It's nice to hear that )))

[Thiago Silva Lopes]

Love your buttons design man! So clean and modern, you rock!

[Stanislav Ilin]

Thank you very much! I am pleased that I am not the only one who appreciates it)

[Olaf Ranai { dev-it-out }]

Nice 💪🏼 thank you very much for that..

having not touch mobile dev for years, I would like to give Flutter a second chance during my spare times 😂😍

[Stanislav Ilin]

It 's definitely worth a try ! 👍

[Mouaz M. Al-Shahmeh]

Nice.

[Stanislav Ilin]

❤️

[ConnelBLAZE]

I started Flutter some months back, it's interesting and this is nice

[Stanislav Ilin]

Thank you very much for the feedback

[MD. Shahadat Hossain]

I'm MD—Shahadat Hossain from Bangladesh. I'm a fresher flutter developer. I can fetch data from the Rest API and Firebase as well. And I have MVVM architecture knowledge and I can make eye-catching UI designs. I'm committed and dedicated to my work and always learning something new.
Now I'd like to do a job or internship to increase my work ability and financial support.
Would you mind, if I got help from you about getting the opportunity to work on Flutter?

[Denyse]

cool 😝

[Stanislav Ilin]

Thank you !

[Nicholas Winston]

Really a detailed guide. Thanks.