group_button 4.5.0

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

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!

Getting Started

Follow these steps to use this package

Add dependency

dependencies:
  group_button: ^4.5.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"],
)

Can't easier to use

Now you can use even simpler constructors to build your button groups.
Example for a group with a single value selection

GroupButton.radio(
  buttons: ['12:00', '13:00', '14:00'],
  onSelected: (i) => debugPrint('Button $i selected'),
)

Example for a group with a choice of multiple values

GroupButton.checkbox(
  buttons: ['12:00', '13:00', '14:00'],
  onSelected: (i, selected) => debugPrint('Button $i selected: $selected'),
)

Controller

Starting from version 4.1.0
You can control your Group Button using the controller

final controller = GroupButtonController();

Column(
  children: [
    GroupButton.checkbox(
      controller: controller,
      buttons: ['12:00', '13:00', '14:00'],
      onSelected: (i, selected) => debugPrint('Button #$i $selected'),
    ),
    TextButton(
      onPressed: () => controller.selectIndex(1),
      child: const Text('Select 1 button'),
    )
  ],
),

Customize

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

GroupButton(
  controller: GroupButtonController(),
  spacing: 5,
  isRadio: false,
  groupingType: GroupingType.wrap,
  direction: Axis.horizontal,
  onSelected: (index, isSelected) => debugPrint(
    '$index button is ${isSelected ? 'selected' : 'unselected'}',
  ),
  buttons: const [
    "Dart",
    "Kotlin",
    "Java",
    "Swift",
    "Objective-C",
    "Python",
    "JS",
    "C#",
    "C",
    "C++"
  ],
  selectedButtons: const [1, 2, 3],
  selectedTextStyle: const 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: const <BoxShadow>[BoxShadow(color: Colors.transparent)],
  unselectedShadow: const <BoxShadow>[BoxShadow(color: Colors.transparent)],
  buttonHeight: 30,
  buttonWidth: 115,
);

Examples

You can check more examples of using this package here

Thanks to all contributors of this package

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