group_button 1.1.0
group_button: ^1.1.0 copied to clipboard

Flutter Android iOS web

Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

group_button #

Build Status License: MIT Pub

Flutter custom widget to make a group buttons.
Included Radio and CheckBox buttons models.
pub package

Getting Started #

Follow these steps to use this package

Add dependency #

  group_button: ^1.1.0 #latest version

Add import package #

import 'package:group_button/group_button.dart';

Easy to use #

Simple example of use GroupButton
Put this code in your project at an screen and learn how it works 😊

    isRadio: false,
    spacing: 10,
    onSelected: (index, isSelected) => print('$index button is selected'),
    buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40"],

Customize #

In order to customize your buttons inside GroupButton you can use code below
This code includes all the fields used in GroupButton

    spacing: 5,
    isRadio: false,
    direction: Axis.horizontal,
    onSelected: (index, isSelected) =>
          print('$index button is ${isSelected ? 'selected' : 'unselected'}'),
    buttons: ["Dart","Kotlin","Java","Swift","Objective-C","Python","JS"],
    selectedButtons: ["Dart","Kotlin"],
    selectedTextStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 16,
    unselectedTextStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 14,
        color: Colors.grey[600],
    selectedColor: Colors.white,
    unselectedColor: Colors.grey[300],
    unselectedBorderColor: Colors.grey[500],
    borderRadius: BorderRadius.circular(5.0),
    selectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
    unselectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],

Attributes #

buttons[String] list that will be displayed on buttons in the [GroupButton]
selectedButtons[String] list that will be set initial selected buttons in the [GroupButton]
onSelectedCallback [Function] works by clicking on a group element
Return int [index] of selected button and [isSelected] if [isRadio] = false
isRadiobool variable for switching between modes [ChackBox] and [Radio]
if the [isRadio] = true, only one button can be selected
if the [isRadio] = false, you can select several at once
directionThe direction of arrangement of the buttons in [GroupButton]
spacingThe spacing between buttons inside [GroupButton]
selectedTextStyle[TextStyle] of text of selected button(s)
unselectedTextStyle[TextStyle] of text of unselected buttons
selectedColorbackground [Color] of selected button(s)
unselectedColorbackground [Color] of unselected buttons
selectedBorderColorborder [Color] of selected button(s)
unselectedBorderColorborder [Color] of unselected buttons
borderRadius[BorderRadius] of buttons
How much the button will be rounded
selectedShadowlist of selected button(s) [BoxShadow]
unselectedShadowlist of unselected buttons [BoxShadow]

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

pub points

Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Repository (GitHub)
View/report issues


API reference





flutter, provider


Packages that depend on group_button