grouped_buttons

pub package

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

Basic Usage

Custom Usage

There are several options that allow for more control.

Custom CheckboxGroup

PropertiesDescription
activeColorThe color to use when a Checkbox is checked.
checkColorThe color to use for the check icon when a Checkbox is checked.
checkedSpecifies 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.
itemBuilderCalled when needed to build a CheckboxGroup element.
labels(required) A list of strings that describes each Checkbox. Each label must be distinct.
labelStyleThe style to use for the labels.
marginEmpty space surrounding the CheckboxGroup.
onChangeCalled when the value of the CheckboxGroup changes.
onSelectedCalled when the user makes a selection.
orientationSpecifies the orientation to display elements. Either GroupedButtonsOrientation.HORIZONTAL or GroupedButtonsOrientation.VERTICAL.
paddingEmpty space in which to inset the CheckboxGroup.
tristateIf 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

PropertiesDescription
activeColorThe color to use when a Radio button is checked.
itemBuilderCalled when needed to build a RadioButtonGroup element.
labels(required) A list of strings that describes each Radio button. Each label must be distinct.
labelStyleThe style to use for the labels.
marginEmpty space surrounding the RadioButtonGroup.
onChangeCalled when the value of the RadioButtonGroup changes.
onSelectedCalled when the user makes a selection.
orientationSpecifies the orientation to display elements. Either GroupedButtonsOrientation.HORIZONTAL or GroupedButtonsOrientation.VERTICAL.
paddingEmpty space in which to inset the RadioButtonGroup.
pickedSpecifies 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,
      ],
    );
  },
);

Screenshot

Basic Usage

Libraries

grouped_buttons