grouped buttons
a set of flutter widgets that makes grouping checkboxes and radio buttons much easier!
installing
add the following to your pubspec.yaml file:
dependencies:
grouped_buttons: ^1.0.3
simple usage
creating a basic checkboxgroup
checkboxgroup(
labels: <string>[
"sunday",
"monday",
"tuesday",
"wednesday",
"thursday",
"friday",
"saturday",
"sunday",
],
onselected: (list<string> checked) => print(checked.tostring())
);
creating a basic radiobuttongroup
radiobuttongroup(
labels: <string>[
"option 1",
"option 2",
],
onselected: (string selected) => print(selected)
);
screenshot
custom usage
there are several options that allow for more control.
custom checkboxgroup
| properties | description |
|---|---|
activecolor |
the color to use when a checkbox is checked. |
checkcolor |
the color to use for the check icon when a checkbox is checked. |
checked |
specifies which boxes to be automatically check. every element must match a label. this is useful for clearing all selections (set it to []). if this is non-null, then the user must handle updating this list; otherwise, the state of the checkboxgroup won’t change. |
itembuilder |
called when needed to build a checkboxgroup element. |
labels |
(required) a list of strings that describes each checkbox. each label must be distinct. |
labelstyle |
the style to use for the labels. |
margin |
empty space surrounding the checkboxgroup. |
onchange |
called when the value of the checkboxgroup changes. |
onselected |
called when the user makes a selection. |
orientation |
specifies the orientation to display elements. either groupedbuttonsorientation.horizontal or groupedbuttonsorientation.vertical. |
padding |
empty space in which to inset the checkboxgroup. |
tristate |
if true the checkbox’s value can be true, false, or null. |
list<string> _checked = ["a", "b"];
checkboxgroup(
orientation: groupedbuttonsorientation.horizontal,
margin: const edgeinsets.only(left: 12.0),
onselected: (list selected) => setstate((){
_checked = selected;
}),
labels: <string>[
"a",
"b",
],
checked: _checked,
itembuilder: (checkbox cb, text txt, int i){
return column(
children: <widget>[
icon(icons.polymer),
cb,
txt,
],
);
},
);
custom radiobuttongroup
| properties | description |
|---|---|
activecolor |
the color to use when a radio button is checked. |
itembuilder |
called when needed to build a radiobuttongroup element. |
labels |
(required) a list of strings that describes each radio button. each label must be distinct. |
labelstyle |
the style to use for the labels. |
margin |
empty space surrounding the radiobuttongroup. |
onchange |
called when the value of the radiobuttongroup changes. |
onselected |
called when the user makes a selection. |
orientation |
specifies the orientation to display elements. either groupedbuttonsorientation.horizontal or groupedbuttonsorientation.vertical. |
padding |
empty space in which to inset the radiobuttongroup. |
picked |
specifies which radio button to automatically pick. every element must match a label. this is useful for clearing what is picked (set it to “”). if this is non-null, then the user must handle updating this; otherwise, the state of the radiobuttongroup won’t change. |
string _picked = "two";
radiobuttongroup(
orientation: groupedbuttonsorientation.horizontal,
margin: const edgeinsets.only(left: 12.0),
onselected: (string selected) => setstate((){
_picked = selected;
}),
labels: <string>[
"one",
"two",
],
picked: _picked,
itembuilder: (radio rb, text txt, int i){
return column(
children: <widget>[
icon(icons.public),
rb,
txt,
],
);
},
);
