flutter_group_button 0.0.3
flutter_group_button: ^0.0.3 copied to clipboard

A flutter package whitch contains grouped buttons like radio buttons

flutter_group_button #

A flutter package which contains basics grouped buttons like radio buttons and checkboxes

VERSION #

[0.0.3]

Table of content #

General info #

Getting start #

To use this package, add flutter_group_button^[version] as a dependency in your pubspec.yaml file

Illustration

dependencies:
  flutter_group_button: ^0.0.3

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

RadioGroup #

The RadioGroup has many arguments for more flexibility which are optional. You can implements theme for your needs. Important to know that both the radio button and the radio's label are clickable

RadioGroup parameters list #

 groupItemsAlignment,
 onSelectionChanged,
 defaultSelectedItem = 0,
 children,
 textBeforeRadio = true,
 padding = const EdgeInsets.all(0),
 margin = const EdgeInsets.all(0),
 activeColor,
 focusColor,
 hoverColor,
 textBelowRadio = true,
 priority = RadioPriority.textBeforeRadio,
 mainAxisAlignment = MainAxisAlignment.start,
 internMainAxisAlignment = MainAxisAlignment.start,
 

RadioGroup parameters details #

(@Required) means that the argument is required by the Widget to work properly

Important to know there is only 3 required parameters for RadioGroup to work
they are:
    groupItemsAlignment,
    children,
    onSelectionChanged,

(@Optional) means that the argument is not required by the RadioGroup to work

(@Required)

groupItemsAlignment #

The alignment of the RadioGroup Items. It can be GroupItemsAlignment.row for row alignment or GroupItemsAlignment.column for column alignment. Note that according to its value and the parent of the RadioGroup, you will have to play with both mainAxisAlignment and internalMainAxisAlignment to make the RadioGroup be at the right place

(@Required)

children #

The item or the list of the items label of the RadioGroup. You can pass any widget or list of widget you want but It's good to pass a Text widget or a list of Text widget like shown
here. Note that you can add a Style to the Text or use any widget you want.

(@Required)

onSelectionChanged #

Callback called when the selected item changed it returns the index of the selected radio button. Note that the index start at 0.

(@Optional)

defaultSelectedItem #

(int): Is the default item to select for the RadioGroup. By default the first item is selected. Note that the index begin at 0. If you don't want any item to be selected, just give a negative value to it.

(@Optional)

padding #

(EdgeInsetsGeometry): Empty space to inscribe inside the RadioGroup.

(@Optional)

textBeforeRadio #

(bool) which tells if the items label must come before or after the radio button. By default it's set to true. if you want the opposite, just set it to false

(@Optional)

textBelowRadio #

(bool): which tells if the item's label must be below or above the Radio. By default, it's set to true. If you want the opposite, just set it to false. One thing to take in consideration, the item's label can not be before and below the radio at the same time. it can only be (before of after the radio button depending on the textBeforeRadio's value) or (below or above the radio button depending on the textBelowRadio's value), so there is a priority to respect.

(@Optional)

priority #

(RadioPriority) which tells if the [textBeforeRadio] is important or not than [textBelowRadio]. it can take two values (RadioPriority.textBeforeRadio or RadioPriority.textBelowRadio). By default, textBeforeRadio is important than textBelowRadio

(@Optional)

margin #

(EdgeInsetsGeometry) Empty space to surround the the RadioGroup items.

(@Optional)

mainAxisAlignment) #

(MainAxisAlignment) The main axis alignment of the RadioGroup. Depending on the container of the RadioGroup parent, you could need it or not.

(@Optional)

internMainAxisAlignment #

(MainAxisAlignment): the internal axis alignment of the RadioGroup. You can control the main axis alignment of the radio button and its label. Depending on the RadioGroup parent, you can have to play with both mainAxisAlignment and this internalRadioAxisAlignment

(@Optional)

focusColor #

(Color): The color for the radio's [Material] when it has the input focus.

(@Optional)

hoverColor; #

(Color): The color for the radio's [Material] when a pointer is hovering over it.

(@Optional)

activeColor #

(Color): The color to use when this radio button is selected. Defaults to [ThemeData.toggleableActiveColor].

Short illustration #

  import 'package:flutter/material.dart';  
  import 'package:flutter_group_button/flutter_group_button';  
   
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter group button demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: 'RadioGroup demo'),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;
  
    @override
    _MyHomePageState createState() => _MyHomePageState();
  }
  
  class _MyHomePageState extends State<MyHomePage> {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: RadioGroup(
              children: [
                Text("Choice 1"),
                Text("Choice 2"),
                /// fell free to add a textStyle or change the Text to Cupertino
                /// Text widget
                Text("Choice 3")
              ],
              groupItemsAlignment: GroupItemsAlignment.column,
              mainAxisAlignment: MainAxisAlignment.center,
              internMainAxisAlignment: MainAxisAlignment.center,
              /// In reality this is not needed
              priority: RadioPriority.textBeforeRadio,
              defaultSelectedItem: -1,
              onSelectionChanged: (selection) {
                print(selection);
              })
        ),
      );
    }
  }

This is the result of the code above

CheckboxGroup #

The CheckboxGroup has many arguments for more flexibility which are optional. You can implements theme for your needs. Important to know that both the checkbox button and the checkbox's label are clickable

CheckBoxGroup parameters list #

child,
onNewChecked,
activeColor,
focusColor,
hoverColor,
checkColor,
priority = CheckboxPriority.textBeforeCheckbox,
groupItemsAlignment,
padding = const EdgeInsets.all(0),
margin = const EdgeInsets.all(0),
textBeforeCheckbox = true,
textBelowCheckBox = true,
mainAxisAlignment = MainAxisAlignment.start,
internMainAxisAlignment = MainAxisAlignment.start,

Checkbox parameters details #

(@Required) means that the argument is required by the Widget to work properly

Important to know, there is only 3 required parameters for CheckboxGroup to work.
They are : 
    groupItemsAlignment,
    child,
    onNewChecked,

(@Optional) means that the argument is not required by the Widget to work

groupItemsAlignment (@Required); #

(GroupItemsAlignment): The alignment of the CheckboxGroup Items. It can be GroupItemsAlignment.row for row alignment or GroupItemsAlignment.column for column alignment. Note that according to its value and the parent of the RadioGroup, you will have to play with both mainAxisAlignment and internalRadioAxisAlignment to make the RadioGroup be right place

child (@Required) #

(Map<Text, bool)): The items of the CheckboxGroup.
here is short illustration. Note that you can add a Style to the Text.

onNewChecked (@Required) #

A callback to notify that a new check box is checked Return a list of checked items. Note That only the item's label (String) is returned

padding (@Optional); #

(EdgeInsetsGeometry): Empty space to inscribe inside the CheckboxGroup.

textBeforeCheckbox (@Optional) #

(bool): tells if the items label must come before or after the checkbox. By default it's set to true. if you want the opposite, just set it to false

textBelowCheckbox (@Optional); #

(bool): tells if the item's label must be below or above the checkbox. By default, it's set to true. If you want the opposite, just set it to false. One thing to take in consideration, the item's label can not be before and below the checkbox at the same time. it can only be (before of after the checkbox depending on the textBeforeCheckbox's value) or (below or above the checkbox depending on the textBelowCheckbox's value), so there is a priority to respect.

priority (@Optional) #

(CheckboxPriority): tells if the [textBeforeCheckbox] is important or not than [textBelowCheckbox]. it can take two values (CheckboxPriority.textBeforeCheckbox or CheckboxPriority.textBelowCkeckbox). By default, textBeforeCheckbox is important than textBelowCheckbox

margin (@Optional) #

(EdgeInsetsGeometry): Empty space to surround the the RadioGroup items.

mainAxisAlignment (@Optional) #

(MainAxisAlignment): The main axis alignment of the CheckboxGroup. Depending on the container of the CheckboxGroup parent, you could need it or not.

internMainAxisAlignment (@Optional) #

(MainAxisAlignment): the internal axis alignment of the CheckboxGroup. You can control the main axis alignment of the checkbox and its label. Depending on the CheckboxGroup parent, you can have to play with both mainAxisAlignment and this internalRadioAxisAlignment

focusColor (@Optional) #

(Color): The color for the checkbox's [Material] when it has the input focus.

hoverColor (@Optional) #

(Color): The color for the checkbox's [Material] when a pointer is hovering over it.

activeColor (@Optional) #

(Color): The color to use when the checkbox is checked. Defaults to [ThemeData.toggleableActiveColor].

checkColor (@Optional) #

Color) The color to use for the check icon when this checkbox is checked. Defaults to Color(0xFFFFFFFF)

Checkbox short illustration #

import 'package:flutter/material.dart';  
import 'package:flutter_group_button/flutter_group_button';  
 
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter group button demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'CheckboxGroup demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: CheckboxGroup(
              child: {
                Text("Choice 1"): false,
                Text("Choice 2"): true,
                Text("Choice 3"): false
              },
              groupItemsAlignment: GroupItemsAlignment.column,
              mainAxisAlignment: MainAxisAlignment.center,
              internMainAxisAlignment: MainAxisAlignment.center,
              priority: CheckboxPriority.textBeforeCheckbox,
              onNewChecked: (l) {
                print(l);
              })
      ),
    );
  }
}

This is the result of the code above

1
likes
90
pub points
46%
popularity

A flutter package whitch contains grouped buttons like radio buttons

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

stmerlhin@gmail.com

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_group_button