Flutter widget to create a group of buttons fast 🚀

Included Radio and CheckBox buttons models with custom groping types 🤤
Show some ❤️ and star the repo to support the project!


Build info Pub Star on Github License: MIT

Pub likes Pub popularity Pub points

ImageImageImage

Getting Started

Follow these steps to use this package

Add dependency

dependencies:
  group_button: ^3.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 😊

GroupButton(
    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

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: [0, 1], /// [List<int>] after 2.2.1 version 
    selectedTextStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 16,
        color: Colors.red,
    ),
    unselectedTextStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 14,
        color: Colors.grey[600],
    ),
    selectedColor: Colors.white,
    unselectedColor: Colors.grey[300],
    selectedBorderColor: Colors.red,
    unselectedBorderColor: Colors.grey[500],
    borderRadius: BorderRadius.circular(5.0),
    selectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
    unselectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
)

Examples

You can check more examples of using this package here


Attributes

AttributeAnnotation
buttonsString list that will be displayed on buttons in the GroupButton
selectedButtonsList<int> that will be set initial selected buttons in the GroupButton when isRadio is false
selectedButtonint that will be set initial selected button in the GroupButton when isRadio is true
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
runSpacingWhen groupingType is GroupingType.wrap this field sets Wrap runSpacing
selectedTextStyleTextStyle of text of selected button(s)
unselectedTextStyleTextStyle 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
borderRadiusBorderRadius of buttons
How much the button will be rounded
selectedShadowlist of selected button(s) BoxShadow
unselectedShadowlist of unselected buttons BoxShadow
groupingTypeThe field is responsible for how the buttons will be grouped GroupingType
mainGroupAlignmentHow the buttons should be placed in the main axis in a layout MainGroupAlignment
crossGroupAlignmentHow the buttons should be placed along the cross axis in a layout CrossGroupAlignment
groupRunAlignmentHow the button runs themselves should be placed the cross axis in a layout GroupRunAlignment

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

Libraries

group_button