Skip to content

Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier.

License

Notifications You must be signed in to change notification settings

ketanchoyal/custom_radio_grouped_button

Repository files navigation

custom_radio_grouped_button

Pub

Custom Radio Buttons and Grouped Check Box Button

Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier

Installing

Add the following to your pubspec.yaml file:

dependencies:
  custom_radio_grouped_button: any

Creating Radio Button

CustomRadioButton(
  elevation: 0,
  absoluteZeroSpacing: true,
  unSelectedColor: Theme.of(context).canvasColor,
  buttonLables: [
    'Student',
    'Parent',
    'Teacher',
  ],
  buttonValues: [
    "STUDENT",
    "PARENT",
    "TEACHER",
  ],
  buttonTextStyle: ButtonTextStyle(
      selectedColor: Colors.white,
      unSelectedColor: Colors.black,
      textStyle: TextStyle(fontSize: 16)),
  radioButtonValue: (value) {
    print(value);
  },
  selectedColor: Theme.of(context).accentColor,
),

Creating Grouped Button

CustomCheckBoxGroup(
  buttonTextStyle: ButtonTextStyle(
    selectedColor: Colors.red,
    unSelectedColor: Colors.orange,
    textStyle: TextStyle(
      fontSize: 16,
    ),
    selectedTextStyle: TextStyle(
      fontSize: 20,
      fontWeight: FontWeight.w700,
    ),
  ),
  unSelectedColor: Theme.of(context).canvasColor,
  buttonLables: [
    "M",
    "T",
    "W",
    "T",
    "F",
    "S",
    "S",
  ],
  buttonValuesList: [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday",
  ],
  checkBoxButtonValues: (values) {
    print(values);
  },
  spacing: 0,
  defaultSelected: "Monday",
  horizontal: false,
  enableButtonWrap: false,
  width: 40,
  absoluteZeroSpacing: false,
  selectedColor: Theme.of(context).accentColor,
  padding: 10, 
);

Changing values Programiically

You can acces the widget's state using Key now

Example: Create a key for the CustomRadioButton widget

final key = new GlobalKey<CustomRadioButtonState<T>>();

now to change the value of the widget pass the value to the selectButton method

key.currentState.selectButton(<value>);

Similarly for the CustomCheckBoxGroup widget

final key = new GlobalKey<CustomCheckBoxGroupState<T>>();

key.currentState.selectButton(<value>);

Screenshots

Grouped Button

Grouped Button