DEV Community

Cover image for Flutter widget to create a group of buttons fast ✈️
Stanislav Ilin
Stanislav Ilin

Posted on

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

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

For multiselect forms Select gender
Image description Image description
For filters Another selection
Image description Image description

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,
        ),
      ),
    ],
  )
Enter fullscreen mode Exit fullscreen mode

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;
    });
  },
)
Enter fullscreen mode Exit fullscreen mode

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"],
)
Enter fullscreen mode Exit fullscreen mode

Here result:
Image description

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]),
  ),
),
Enter fullscreen mode Exit fullscreen mode

Here result:
Image description

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

Top comments (25)

Collapse
 
graciellesampaio profile image
Gracielle Sampaio

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

Collapse
 
frezyx profile image
Stanislav Ilin

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

Collapse
 
graciellesampaio profile image
Gracielle Sampaio

Cool, thanks!!!

Collapse
 
jacksonkasi profile image
Jackson Kasi

nice✨

Collapse
 
frezyx profile image
Stanislav Ilin

Thank you

Collapse
 
raheemamer profile image
Raheem Amer

Loved it. Thank you <3

Collapse
 
frezyx profile image
Stanislav Ilin

It's nice to hear that )))

Collapse
 
thiagoow profile image
Thiago Silva Lopes • Edited

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

Collapse
 
frezyx profile image
Stanislav Ilin

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

Collapse
 
connelevalsam profile image
ConnelBLAZE

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

Collapse
 
frezyx profile image
Stanislav Ilin

Thank you very much for the feedback

Collapse
 
olaf_ranai profile image
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 😂😍

Collapse
 
frezyx profile image
Stanislav Ilin

It 's definitely worth a try ! 👍

Collapse
 
mouaz_m_alshahmeh profile image
Mouaz M. Al-Shahmeh

Nice.

Collapse
 
frezyx profile image
Stanislav Ilin

❤️

Collapse
 
nicholaswinst14 profile image
Nicholas Winston

Really a detailed guide. Thanks.

Collapse
 
dmutoni profile image
Denyse

cool 😝

Collapse
 
frezyx profile image
Stanislav Ilin

Thank you !

Collapse
 
khokon profile image
Khokon M.

Awesome work Stanislav!

Collapse
 
frezyx profile image
Stanislav Ilin

It's nice that you appreciate

Collapse
 
frezyx profile image
Stanislav Ilin

Thanks !

Collapse
 
stormytalent profile image
StormyTalent

Excellent! It gives me strong inspirations!
Thanks!

Collapse
 
masekere profile image
Gift Masekere

flutter itself is awesome but simple packages like this are super handy, great work

Collapse
 
stormytalent profile image
StormyTalent

Perfect explannation!
Thanks