Flutter GroupButton 5.0.0 release notes
Tags: flutter, dart, android, opensource
Published: 2022-04-10 15:33:56

##Hello everybody!
A lot of people read my [last post](https://dev.to/frezyx/flutter-widget-to-create-a-group-of-buttons-fast-3fo7) about my [group_button](https://github.com/Frezyx/group_button) package
And I decide to tell you about huge package update to 5.0.0 version.

## The main feature of the update - go to Generics

Changelog: 
- 🔥  **MAIN FEAT**: GroupButton\<T> now is generic class.<br>Now you can create int, DateTime, double or YourCustomClass typed buttons List for default GroupButton constructor.<br> **More** [here](https://github.com/Frezyx/group_button/blob/master/example/lib/examples/generics_example/generics_example.dart)

- ❗️ **BREAKING**: All deprecated by *4.3.0* and *4.6.0* fields was removed from package.<br> **More** [here](https://github.com/Frezyx/group_button#customize)

- ❗️ **BREAKING**: buttonBuilder from *4.6.0* now build buttons by value <br> The buttonIndexedBuilder took over the past functionality of the buttonBuilder

- ⬆️  **FEAT**: onSelected method now calling with value argument.<br>**More** [here](https://github.com/Frezyx/group_button/blob/master/lib/src/group_button_base.dart#:~:text=final%20Function(T%20value%2C%20int%20index%2C%20bool%20isSelected)%3F%20onSelected%3B)

-  🎀 **INFO**: Updated examples & README

## What is thats meaning ?
In new 5.0.0 version you can set custom buttons value type
It can be int, DateTime, double or YourCustomClass
Button text will be result of .toString() model method in common button display case
```dart
GroupButton<DateTime>(
  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
)
```

Also you can use generic button values with custom buttonBuilder
In order to turn values into any widget
```dart
GroupButton<DateTime>(
  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
  buttonBuilder: (selected, date, context) {
    return Text('${date.year}-${date.month}-${date.day}');
  },
),
```

## Customization
In order to customize your buttons inside *GroupButton* you can use *GroupButtonOptions*
```dart
GroupButtonOptions(
  selectedShadow: const [],
  selectedTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.pink[900],
  ),
  selectedColor: Colors.pink[100],
  unselectedShadow: const [],
  unselectedColor: Colors.amber[100],
  unselectedTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.amber[900],
  ),
  selectedBorderColor: Colors.pink[900],
  unselectedBorderColor: Colors.amber[900],
  borderRadius: BorderRadius.circular(100),
  spacing: 10,
  runSpacing: 10,
  groupingType: GroupingType.wrap,
  direction: Axis.horizontal,
  buttonHeight: 60,
  buttonWidth: 60,
  mainGroupAlignment: MainGroupAlignment.start,
  crossGroupAlignment: CrossGroupAlignment.start,
  groupRunAlignment: GroupRunAlignment.start,
  textAlign: TextAlign.center,
  textPadding: EdgeInsets.zero,
  alignment: Alignment.center,
  elevation: 0,
),
```

## GroupButtonValueBuilder<T> buttonBuilder
Custom builder method to create
your own custom buttons by button [T] value

```dart
final buttons = ['10:00', '11:00', '12:00'];

GroupButton(
  buttons: buttons,
  buttonBuilder: (selected, val, context) {
    return Text('$val is selected: $selected');
  },
),
```

And this example equals to next ->

## GroupButtonIndexedBuilder buttonIndexedBuilder
Custom builder method to create
your own custom buttons by button [int] index

```dart
final buttons = ['10:00', '11:00', '12:00'];

GroupButton(
  buttons: buttons,
  buttonIndexedBuilder: (selected, index, context) {
    return Text('${buttons[index]} selected: $selected');
  },
),
```

## Remove deprecated and refactor base
And last awesome chage is update package api
Now you can create group of buttons by 1 code line😳:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysiafyexqoldvzslllds.png)

```dart
GroupButton(buttons: ['10:00', '11:00', '12:00', '13:00']),
```
```dart
GroupButton(buttons: [10.5, 11, 11.5, 12, 12.5]),
```
```dart
GroupButton(buttons: [35, 36, 37, 38, 39]),
```
```dart
GroupButton(buttons: [false, true]),
```

Thank you for reading this small post🙏!

Connect with me on [GitHub](https://github.com/Frezyx) and pls put ✨star✨ for [this package](https://github.com/Frezyx/group_button)