Merge pull request #81 from Frezyx/dev

Release version 5.0.0

Author: Frezyx

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'}',
                           );