grouped_buttons 1.0.4

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 94

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

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

[1.0.0] - March 17, 2019

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

Features:

  • CheckedBoxGroup
  • RadioButtonGroup

[1.0.1] - March 17, 2019

Updated broken images in documentation and changed homepage to the GitHub repo.

[1.0.2] - March 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

[1.0.3] - March 22, 2019

  • Updated the project file structure (importing the package is now easier)

[1.0.4] - April 8, 2019

  • Added the option to disable elements of the CheckboxGroup and RadioButtonGroup using the disabled property

example/lib/main.dart

/*
Name: Akshath Jain
Date: 3/15/19
Purpose: example app for the grouped buttons package
*/

import 'package:flutter/material.dart';
import 'package:grouped_buttons/grouped_buttons.dart';

void main() => runApp(GroupedButtonExample());

class GroupedButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Grouped Buttons Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<String> _checked = ["A", "B"];
  String _picked = "Two";

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text("Grouped Buttons Example"),
      ),
      body: _body(),
    );
    //
  }

  Widget _body(){
    return ListView(
      children: <Widget>[

        //--------------------
        //SIMPLE USAGE EXAMPLE
        //--------------------

        //BASIC CHECKBOXGROUP
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0),
          child: Text("Basic CheckboxGroup",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0
            ),
          ),
        ),

        CheckboxGroup(
          labels: <String>[
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
          ],
          disabled: [
            "Wednesday",
            "Friday"
          ],
          onChange: (bool isChecked, String label, int index) => print("isChecked: $isChecked   label: $label  index: $index"),
          onSelected: (List<String> checked) => print("checked: ${checked.toString()}"),
        ),



        //BASIC RADIOBUTTONGROUP
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0),
          child: Text("Basic RadioButtonGroup",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0
            ),
          ),
        ),

        RadioButtonGroup(
          labels: [
            "Option 1",
            "Option 2",
          ],
          disabled: [
            "Option 1"
          ],
          onChange: (String label, int index) => print("label: $label index: $index"),
          onSelected: (String label) => print(label),
        ),




        //--------------------
        //CUSTOM USAGE EXAMPLE
        //--------------------

        ///CUSTOM CHECKBOX GROUP
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0, bottom: 14.0),
          child: Text("Custom CheckboxGroup",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0
            ),
          ),
        ),

        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 RADIOBUTTON GROUP
        Container(
          padding: const EdgeInsets.only(left: 14.0, top: 14.0, bottom: 14.0),
          child: Text("Custom RadioButtonGroup",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0
            ),
          ),
        ),

        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,
              ],
            );
          },
        ),

      ]
    );
  }

}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  grouped_buttons: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:grouped_buttons/grouped_buttons.dart';
  
Version Uploaded Documentation Archive
1.0.4 Apr 8, 2019 Go to the documentation of grouped_buttons 1.0.4 Download grouped_buttons 1.0.4 archive
1.0.3 Mar 22, 2019 Go to the documentation of grouped_buttons 1.0.3 Download grouped_buttons 1.0.3 archive
1.0.2 Mar 17, 2019 Go to the documentation of grouped_buttons 1.0.2 Download grouped_buttons 1.0.2 archive
1.0.1 Mar 17, 2019 Go to the documentation of grouped_buttons 1.0.1 Download grouped_buttons 1.0.1 archive
1.0.0 Mar 17, 2019 Go to the documentation of grouped_buttons 1.0.0 Download grouped_buttons 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
89
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
95
Overall:
Weighted score of the above. [more]
94
Learn more about scoring.

We analyzed this package on Jun 25, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.2
  • pana: 0.12.18
  • Flutter: 1.5.4-hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/grouped_buttons.dart.

Run flutter format to format lib/grouped_buttons.dart.

Format lib/src/checkbox_group.dart.

Run flutter format to format lib/src/checkbox_group.dart.

Format lib/src/grouped_buttons_orientation.dart.

Run flutter format to format lib/src/grouped_buttons_orientation.dart.

Format lib/src/radio_button_group.dart.

Run flutter format to format lib/src/radio_button_group.dart.

Maintenance issues and suggestions

Support latest dependencies. (-5 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test