A set of Flutter widgets that makes grouping Checkboxes and Radio Buttons much easier!

Overview

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

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

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 checked. 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.
disabled Specifies which boxes should be disabled. If this is non-null, no boxes will be disabled. The strings passed to this must match the labels.
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.
disabled Specifies which buttons should be disabled. If this is non-null, no buttons will be disabled. The strings passed to this must match the labels.
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,
      ],
    );
  },
);

Screenshot

Basic Usage

Comments
  • Error at compilation

    Error at compilation

    Hello, I use grouped_buttons: ^1.0.4

    Error stacktrace gives

    Compiler message:                                                       
    file:///Applications/flutter/1.2.1-stable/.pub-cache/hosted/pub.dartlang.org/custom_radio-0.1.2/lib/custom_radio.dart:102:36: Error: The argument type 'Null Function(Null)' can't be assigned to the parameter type 'dynamic Function(void)'.
    Try changing the type of the parameter, or casting the argument to 'dynamic Function(void)'.
            _controller.reverse().then((Null value) {                       
                                       ^                                    
    Compiler failed on /Users/rchenon/Projects/feedback/mobile/lib/main.dart
    

    My code

    import 'package:flutter/material.dart';
    import 'package:grouped_buttons/grouped_buttons.dart';
    
     final radioButton = RadioButtonGroup(
        labels: [
          "Option 1",
          "Option 2",
        ],
        disabled: ["Option 1"],
        onChange: (String label, int index) => print("label: $label index: $index"),
        onSelected: (String label) => print(label),
      );
    
      Widget _buildCard() => SizedBox(
            child: Card(
              child: Column(
                children: [
                     ...
                 radioButton
                ],
              ),
            ),
          );
    
    opened by raychenon 2
  • Text doesn't seem to wrap like when using RadioListTile or CheckboxListTile?

    Text doesn't seem to wrap like when using RadioListTile or CheckboxListTile?

    When I pass in text that's 2-3 lines, the text simply overflows. In RadioListTile and CheckboxListTile, it wraps correctly. Is there any way to fix this? I've constructed a temporary workaround using itemBuilder to construct a list tile, but this has some UI problems - for one, when the text is clicked, the corresponding radio/checkbox button doesn't activate.

    opened by naiveai 1
  • Disabled CheckBoxes and RadioButtons

    Disabled CheckBoxes and RadioButtons

    In some cases we might need a disabled state for the widgets to tell the users that certain items are present but not be able to changed in users current option set.

    opened by aytunch 1
  • Error: Cannot run with sound null safety

    Error: Cannot run with sound null safety

    Launching lib/main.dart on sdk gphone x86 in debug mode... Running Gradle task 'assembleDebug'... Error: Cannot run with sound null safety, because the following dependencies don't support null safety:

    • package:grouped_buttons

    For solutions, see https://dart.dev/go/unsound-null-safety

    FAILURE: Build failed with an exception.

    Can you please update this package for null safety?

    opened by bobwilmes 0
  • Labels - Long String (maxLines)

    Labels - Long String (maxLines)

    When there is a long string there is a spacing problem, a suggestion to be applied in the plugin is to predict MaxLines in the Widget Text and wrap in an Expanded, I made the adaptation and had the satisfactory result. Example:

    Text t = Text(
            widget.labels.elementAt(i),
           maxLines: 2,
            style: (widget.disabled != null && widget.disabled.contains(widget.labels.elementAt(i))) ?
                      widget.labelStyle.apply(color: Theme.of(context).disabledColor) :
                      widget.labelStyle
          );
    

    In the Build area a suggestion:

    content.add(Row(children: <Widget>[
                SizedBox(width: 12.0),
                cb,
                SizedBox(width: 12.0),
                Expanded(
                  child:
                    Container(
                    child: t
                )),
              ]));
    
    opened by ricardonogpereira 0
Releases(v1.0.4)
  • v1.0.4(Apr 8, 2019)

  • v1.0.3(Mar 22, 2019)

  • v1.0.2(Mar 17, 2019)

    • Added ability for user to:
      • Clear CheckboxGroup & RadioButtonGroup
      • Specify initial states for CheckboxGroup & RadioButtonGroup
      • Manually change the state for CheckboxGroup & RadioButtonGroup
    • Updated Dart docs for CheckboxGroup and RadioButtonGroup.
    • Fixed some typos in the README
    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Mar 17, 2019)

  • v1.0.0(Mar 17, 2019)

    Initial Release. This is a set of Flutter widgets that makes grouping Checkboxes and Radio Buttons much easier!

    Features:

    • CheckedBoxGroup
    • RadioButtonGroup
    Source code(tar.gz)
    Source code(zip)
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.

Draggable Home A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver. Us

Devs On Flutter 106 Dec 12, 2022
A radio component suitable for almost any radio scenario.

fradio A radio component suitable for almost any radio scenario. Supports excellent interactive special effects, as well as a simple multi-interactive

Fliggy Mobile 75 Nov 26, 2022
Nebula makes your Flutter development journey easier by providing helper widgets, utilities and abstractions.

Nebula makes your Flutter development journey easier by providing helper widgets, utilities and abstractions.

Aldrin's Art Factory 1 Apr 21, 2022
This package helps developer to sort the flutter/dart packages and plugins alphabetically, This makes it easier when managing too many packages and when working with teams

Package helps to sort the flutter/dart packages and plugins alphabetically, This makes it easier when managing too many packages and when working with

DANCHE 7 Dec 21, 2022
💙🔥 FlutterFire commons repository, makes FlutterFire app development faster, easier, and more fun!

???? FlutterFire commons repository, makes FlutterFire app development faster, easier, and more fun!

Kosuke Saigusa 18 Dec 1, 2022
Response Parser makes it easier to parse data and error response from server.

Response Parser makes it easier to parse data and error response from server. Getting started Do you want to write this pretty functions... Future<Eit

Qyre AB 4 Nov 5, 2022
A platform similar to iFood that makes it easier for the consumers to find a list of generators with solar plates system available for rent

iEnergy App A platform similar to iFood that makes it easier for the consumers to find a list of generators with solar plates system available for ren

André Diogo 1 Jun 7, 2022
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

GTK ❤️ Flutter Unofficial implementation of GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME Human Interface Guidelines. Featur

Prateek SU 164 Dec 26, 2022
Flutter Youtube Redesign. this gave me so much Experience For Flutter . I used Video_player and Spring animation packages in this project

youtube A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

null 1 Dec 13, 2021
Weather app using Bloc architecture pattern & generic HTTP client with interface implementation and much more for more detail read Readme

weather Weather application for current weather, hourly forecast for 48 hours, Daily forecast for 7 days and national weather alerts. How to Run Insta

Jibran Ahmed SiddiQui 9 Oct 29, 2022
Fully Featured Chat App Using Firebase, RiverPod and much more.

LetsChat Fully Featured Chat App Using Firebase, RiverPod and much more. LetsChat app has a beautiful responsive UI. The app includes many features li

Mateen Mehmood 94 Dec 6, 2022
The application contains the Noble Qur’an, Qur’an radio stations, morning and evening remembrances, and some supplications that a Muslim needs in his life, as well as prayer times, the direction of the qiblah, and the Forty-Nawawi book

The application contains the Noble Qur’an, Qur’an radio stations, morning and evening remembrances, and some supplications that a Muslim needs in his life, as well as prayer times, the direction of the qiblah, and the Forty-Nawawi book

Mohamed Ayad 14 Dec 15, 2022
Flutter form fields designed to take much of the burden of form-related coding off the programmer's back — masks, validations, keyboard type, etc.

well_formed Contents Overview Getting Started Demo application References Overview Well-Formed Widget Fields - Well-Formed - is a collection of Flutte

Dartoos 7 Nov 2, 2022
Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster.

Readky. Introduction Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster. You just need to add

Muhammad Rezky Sulihin 54 Nov 26, 2022
Hungry is a Free Flutter Recipe App Starter Template that can help you develop a Recipe application much faster.

Hungry is a Free Flutter Recipe App Starter Template that can help you develop a Recipe application much faster. You just need to add some adjustment to the frontend and you can create your own backend.

Muhammad Rezky Sulihin 48 Dec 20, 2022
Another breakpoint framework. Aims to simplify as much as possible building adaptive layouts.

Another breakpoint framework. Aims to simplify as much as possible building adaptive layouts. Features Really simple implementation Works with and wit

null 3 Sep 26, 2022