Merge pull request #81 from Frezyx/dev

Release version 5.0.0

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 5.0.0
+ - **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
+
+- **INFO**: Updated examples & README
+
 ## 4.8.0
  - **FEAT**: Added enableIndexes abd disableIndexes methods for controller
 

README.md

@@ -40,7 +40,7 @@ Follow these steps to use this package
 
 ```yaml
 dependencies:
- group_button: ^4.8.0 #latest version
+ group_button: ^5.0.0
 ```
 
 ### Add import package
@@ -56,30 +56,11 @@ Put this code in your project at an screen and learn how it works 😊
 ```dart
 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. <br>
-Example for a group with a single value selection
-```dart
-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
-```dart
-GroupButton.checkbox(
- buttons: ['12:00', '13:00', '14:00'],
- onSelected: (i, selected) => debugPrint('Button $i selected: $selected'),
-)
-```
-
 ### Controller
 **Starting from version 4.1.0** <br>
 You can control your Group Button using the controller
@@ -102,59 +83,66 @@ Column(
 ),
 ```
 
+### Generic button value
+In new 5.0.0 version you can set custom buttons value type <br>
+It can be int, DateTime, double or YourCustomClass <br>
+Button text will be result of .toString() model method in common button display case <br>
+```dart
+GroupButton<DateTime>(
+ buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
+)
+```
+
+Also you can use generic button values with cutsom buttonBuilder <br>
+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}');
+ },
+),
+```
+
 ### Customize
-In order to customize your buttons inside *GroupButton* you can use code below</br>
-This code includes *all* the fields used in *GroupButton*
+In order to customize your buttons inside *GroupButton* you can use *GroupButtonOptions*
 
 ```dart
-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,
+GroupButtonOptions(
+ selectedShadow: const [],
+ selectedTextStyle: TextStyle(
+ fontSize: 20,
+ color: Colors.pink[900],
  ),
+ selectedColor: Colors.pink[100],
+ unselectedShadow: const [],
+ unselectedColor: Colors.amber[100],
  unselectedTextStyle: TextStyle(
- fontWeight: FontWeight.w600,
- fontSize: 14,
- color: Colors.grey[600],
+ fontSize: 20,
+ color: Colors.amber[900],
  ),
- 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,
- enableDeselect: false,
- maxSelected: 5
-);
+ 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,
+),
 ```
 
-### Examples
+![](https://github.com/Frezyx/group_button/blob/master/example/rep_files/options_example.png?raw=true) 
 
+### Examples
 You can check more examples of using this package [here](example/lib)
 
 <br>

example/lib/examples/button_builder_example/example.dart

@@ -60,7 +60,7 @@ class _ButtonBuilderExampleState extends State<ButtonBuilderExample> {
  shadowColor: Colors.grey[100]?.withOpacity(0.1),
  backgroundColor: Colors.white,
  title: Text(
- 'GroupButton 4.8.0',
+ 'GroupButton 5.0.0',
  style: Theme.of(context).textTheme.headline6,
  ),
  ),
@@ -80,7 +80,7 @@ class _ButtonBuilderExampleState extends State<ButtonBuilderExample> {
  groupingType: GroupingType.column,
  ),
  buttons: _checkboxButtons,
- buttonBuilder: (selected, index, context) {
+ buttonIndexedBuilder: (selected, index, context) {
  return CheckBoxTile(
  title: _checkboxButtons[index],
  selected: selected,
@@ -93,7 +93,8 @@ class _ButtonBuilderExampleState extends State<ButtonBuilderExample> {
  },
  );
  },
- onSelected: (i, selected) => debugPrint('Button #$i $selected'),
+ onSelected: (val, i, selected) =>
+ debugPrint('Button: $val index: $i $selected'),
  ),
  const SizedBox(height: 10),
  Padding(
@@ -108,7 +109,7 @@ class _ButtonBuilderExampleState extends State<ButtonBuilderExample> {
  isRadio: true,
  options: GroupButtonOptions(groupingType: GroupingType.column),
  buttons: _radioButtons,
- buttonBuilder: (selected, index, context) {
+ buttonIndexedBuilder: (selected, index, context) {
  return RadioTile(
  title: _radioButtons[index],
  selected: _radioController.selectedIndex,
@@ -118,7 +119,8 @@ class _ButtonBuilderExampleState extends State<ButtonBuilderExample> {
  },
  );
  },
- onSelected: (i, selected) => debugPrint('Button #$i $selected'),
+ onSelected: (val, i, selected) =>
+ debugPrint('Button: $val index: $i $selected'),
  ),
  ],
  ),

example/lib/examples/customizable_example/customizable_example.dart

@@ -23,7 +23,7 @@ class CustomizableExample extends StatelessWidget {
  shadowColor: Colors.grey[100]?.withOpacity(0.1),
  backgroundColor: Colors.white,
  title: Text(
- 'GroupButton 4.8.0',
+ 'GroupButton 5.0.0',
  style: Theme.of(context).textTheme.headline6,
  ),
  ),
@@ -34,7 +34,8 @@ class CustomizableExample extends StatelessWidget {
  buttons: customizableController.buttons
  .map((i) => '${i + 1}')
  .toList(),
- onSelected: (i, selected) => debugPrint('Button #$i $selected'),
+ onSelected: (val, i, selected) =>
+ debugPrint('Button: $val index: $i $selected'),
  ),
  ),
  bottomNavigationBar: GroupButtonBottomPanel(

example/lib/examples/extended_example/checkbox_example_part.dart

@@ -23,9 +23,8 @@ Widget _buildCheckboxExample(GroupingType groupingType, {Axis? direction}) {
  ),
  borderRadius: BorderRadius.circular(30),
  ),
- onSelected: (index, isSelected) => debugPrint(
- '$index button is ${isSelected ? 'selected' : 'unselected'}',
- ),
+ onSelected: (val, i, selected) =>
+ debugPrint('Button: $val index: $i $selected'),
  buttons: const [
  'Burger',
  'Sandwiches',

example/lib/examples/extended_example/example.dart

@@ -46,7 +46,7 @@ class _ExampleState extends State<_Example> {
  shadowColor: Colors.grey[100]?.withOpacity(0.1),
  backgroundColor: Colors.white,
  title: Text(
- 'GroupButton 4.8.0',
+ 'GroupButton 5.0.0',
  style: Theme.of(context).textTheme.headline6,
  ),
  ),
@@ -70,7 +70,7 @@ class _ExampleState extends State<_Example> {
  groupingType: GroupingType.row,
  ),
  buttons: const ['Wrap', 'Column', 'Row'],
- onSelected: (i, selected) {
+ onSelected: (val, i, selected) {
  _extendedExampleController.selectedGroupingType = i;
  },
  ),
@@ -86,7 +86,7 @@ class _ExampleState extends State<_Example> {
  spacing: 7.5,
  ),
  buttons: const ['Radio', 'CheckBox'],
- onSelected: (i, selected) {
+ onSelected: (_, i, selected) {
  _pageController.animateToPage(
  i,
  duration: const Duration(milliseconds: 200),

example/lib/examples/extended_example/radio_example_part.dart

@@ -15,8 +15,8 @@ Widget _buildRadioExample(GroupingType groupingType, {Axis? direction}) {
  direction: direction,
  groupingType: groupingType,
  ),
- onSelected: (index, isSelected) =>
- debugPrint('$index button is selected'),
+ onSelected: (val, i, selected) =>
+ debugPrint('Button: $val index: $i $selected'),
  buttons: const ['12:00', '13:00', '14:30', '18:00', '19:00', '21:40'],
  ),
  ),

example/lib/examples/full_options_example/full_options_example.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:group_button/group_button.dart';
+
+class FullOptionsSelectedExample extends StatelessWidget {
+ const FullOptionsSelectedExample({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ debugShowCheckedModeBanner: false,
+ home: Scaffold(
+ body: Center(
+ child: GroupButton(
+ buttons: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
+ options: 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,
+ ),
+ isRadio: false,
+ ),
+ ),
+ ),
+ );
+ }
+}

example/lib/examples/generics_example/generics_example.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:group_button/group_button.dart';
+
+class GenericsExample extends StatelessWidget {
+ GenericsExample({Key? key}) : super(key: key);
+
+ final controller = GroupButtonController(
+ selectedIndex: 0,
+ onDisablePressed: (i) => print('Button #$i is disabled'),
+ );
+
+ final day = DateTime(2022, 4, 9);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ debugShowCheckedModeBanner: false,
+ home: Scaffold(
+ body: Center(
+ child: GroupButton<DateTime>(
+ controller: controller,
+ buttons: List.generate(18, (i) => day.add(Duration(days: i))),
+ onSelected: (date, i, selected) =>
+ debugPrint('Button: $date index: $i selected: $selected'),
+ buttonBuilder: (selected, date, context) {
+ return Card(
+ color: selected ? Colors.amber[900] : Colors.white,
+ child: Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Text(
+ '${date.year}-${date.month}-${date.day}',
+ style: TextStyle(
+ color: selected ? Colors.white : Colors.black,
+ ),
+ ),
+ ),
+ );
+ },
+ ),
+ ),
+ ),
+ );
+ }
+}

example/lib/examples/provider_example/ui/app.dart

@@ -90,7 +90,7 @@ class HomePageState extends State<HomePage>
  selectedColor: primaryColor,
  ),
  isRadio: false,
- onSelected: (index, isSelected) {
+ onSelected: (_, index, isSelected) {
  debugPrint(
  '$index button is ${isSelected ? 'selected' : 'unselected'}',
  );