Skip to content

Commit

Permalink
Merge pull request #70 from ketanchoyal/dev
Browse files Browse the repository at this point in the history 
feat: Added feature to select button programmatically
  • Loading branch information
@ketanchoyal
ketanchoyal authored Mar 31, 2023
2 parents 415ef61 + 49c77f2 commit dca4208
Show file tree
Hide file tree
Showing 7 changed files with 170 additions and 124 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
## [2.2.0] - 31 March 2023
- Added way to select buttons programmatically (Fix #69)
- Fixed bug where buttons were not being selected when value and label were different
## [2.1.3] - 22 March 2023
- Added Feature to disable a button (Fix #67)

Expand Down
22 changes: 17 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@ Custom Radio Buttons and Grouped Check Box Button

Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier

## Breaking Changes:
From Version 1.0.2

buttonColor is now unSelectedColor

## Installing

Add the following to your `pubspec.yaml` file:
Expand Down Expand Up @@ -87,6 +82,23 @@ Add the following to your `pubspec.yaml` file:
padding: 10,
);

# Changing values Programiically

You can acces the widget's state using `Key` now

Example: Create a key for the CustomRadioButton widget

final key = new GlobalKey<CustomRadioButtonState<T>>();

now to change the value of the widget pass the value to the `selectButton` method

key.currentState.selectButton(<value>);

Similarly for the CustomCheckBoxGroup widget

final key = new GlobalKey<CustomCheckBoxGroupState<T>>();

key.currentState.selectButton(<value>);

## Screenshots

Expand Down
41 changes: 32 additions & 9 deletions example/lib/RadioButtonPage.dart
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import 'package:custom_radio_grouped_button/custom_radio_grouped_button.dart';
import 'package:flutter/material.dart';

class RadioButton extends StatelessWidget {
const RadioButton({Key key}) : super(key: key);
class RadioButton extends StatefulWidget {
RadioButton({Key key}) : super(key: key);

@override
State<RadioButton> createState() => _RadioButtonState();
}

class _RadioButtonState extends State<RadioButton> {
final key = new GlobalKey<CustomRadioButtonState<String>>();

@override
Widget build(BuildContext context) {
Expand All @@ -11,12 +18,27 @@ class RadioButton extends StatelessWidget {
title: Text('Radio Button Example'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton.extended(
label: Text('Grouped Button'),
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.check_box),
floatingActionButton: Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FloatingActionButton(
heroTag: "sfsdf",
onPressed: () {
key.currentState.selectButton('jhgiugx');
},
child: Icon(Icons.check_box_outline_blank),
),
FloatingActionButton.extended(
label: Text('Grouped Button'),
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.check_box),
),
],
),
),
body: Container(
child: ListView(
Expand Down Expand Up @@ -47,7 +69,8 @@ class RadioButton extends StatelessWidget {
SizedBox(
height: 10,
),
CustomRadioButton(
CustomRadioButton<String>(
key: key,
horizontal: true,
unSelectedColor: Theme.of(context).canvasColor,
disabledValues: [
Expand Down
2 changes: 1 addition & 1 deletion example/pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ packages:
path: ".."
relative: true
source: path
version: "2.1.3"
version: "2.2.0"
fake_async:
dependency: transitive
description:
Expand Down
93 changes: 50 additions & 43 deletions lib/CustomButtons/CustomCheckBoxGroup.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,14 +122,14 @@ class CustomCheckBoxGroup<T> extends StatefulWidget {
/// Radius for shape radio button
final double shapeRadius;

_CustomCheckBoxGroupState createState() => _CustomCheckBoxGroupState();
CustomCheckBoxGroupState<T> createState() => CustomCheckBoxGroupState<T>();
}

class _CustomCheckBoxGroupState extends State<CustomCheckBoxGroup> {
List<dynamic> selectedLables = [];
class CustomCheckBoxGroupState<T> extends State<CustomCheckBoxGroup<T>> {
List<T> selectedValues = [];

Color borderColor(e) =>
(selectedLables.contains(e)
Color _borderColor(T e) =>
(selectedValues.contains(e)
? widget.selectedBorderColor
: widget.unSelectedBorderColor) ??
Theme.of(context).primaryColor;
Expand All @@ -140,22 +140,41 @@ class _CustomCheckBoxGroupState extends State<CustomCheckBoxGroup> {
widget.defaultSelected?.where((e) {
return widget.buttonValuesList.contains(e);
}).forEach((e) {
selectedLables.add(e);
selectedValues.add(e);
});
}

List<T> get buttonValuesList => widget.buttonValuesList;

List<String> get buttonLables => widget.buttonLables;

List<T> get disabledValues => widget.disabledValues;

/// This function will select the button and update the state
/// THis can be access from outside to change the selected value programatically
/// Please note that this will also call the [checkBoxButtonValues] callback
void selectButton(T selectedValue) {
if (selectedValues.contains(selectedValue)) {
selectedValues.remove(selectedValue);
} else {
selectedValues.add(selectedValue);
}
if (mounted) setState(() {});
widget.checkBoxButtonValues(selectedValues);
}

List<Widget> _buildButtonsColumn() {
return widget.buttonValuesList.map((e) {
bool disabled = widget.disabledValues.contains(e);
int index = widget.buttonValuesList.indexOf(e);
return buttonValuesList.map((e) {
bool disabled = disabledValues.contains(e);
int index = buttonValuesList.indexOf(e);
return Padding(
padding: EdgeInsets.all(widget.padding),
child: Card(
margin: widget.margin ??
EdgeInsets.all(widget.absoluteZeroSpacing ? 0 : 4),
color: disabled
? widget.disabledColor ?? widget.unSelectedColor
: selectedLables.contains(e)
: selectedValues.contains(e)
? widget.selectedColor
: widget.unSelectedColor,
elevation: widget.elevation,
Expand All @@ -174,26 +193,16 @@ class _CustomCheckBoxGroupState extends State<CustomCheckBoxGroup> {
? widget.customShape == null
? OutlineInputBorder(
borderSide:
BorderSide(color: borderColor(e), width: 1),
BorderSide(color: _borderColor(e), width: 1),
borderRadius:
BorderRadius.all(Radius.circular(widget.radius)),
)
: widget.customShape
: OutlineInputBorder(
borderSide: BorderSide(color: borderColor(e), width: 1),
borderSide: BorderSide(color: _borderColor(e), width: 1),
borderRadius: BorderRadius.zero,
),
onPressed: disabled
? null
: () {
if (selectedLables.contains(e)) {
selectedLables.remove(e);
} else {
selectedLables.add(e);
}
setState(() {});
widget.checkBoxButtonValues(selectedLables);
},
onPressed: disabled ? null : () => selectButton(e),
child: Text(
widget.buttonLables[index],
textAlign: TextAlign.center,
Expand All @@ -202,7 +211,7 @@ class _CustomCheckBoxGroupState extends State<CustomCheckBoxGroup> {
style: widget.buttonTextStyle.textStyle.copyWith(
color: disabled
? widget.buttonTextStyle.disabledColor
: selectedLables.contains(e)
: selectedValues.contains(e)
? widget.buttonTextStyle.selectedColor
: widget.buttonTextStyle.unSelectedColor,
),
Expand All @@ -215,14 +224,17 @@ class _CustomCheckBoxGroupState extends State<CustomCheckBoxGroup> {
}

List<Widget> _buildButtonsRow() {
return widget.buttonValuesList.map((e) {
int index = widget.buttonValuesList.indexOf(e);
return buttonValuesList.map((e) {
int index = buttonValuesList.indexOf(e);
bool disabled = disabledValues.contains(e);
return Card(
margin:
widget.margin ?? EdgeInsets.all(widget.absoluteZeroSpacing ? 0 : 4),
color: selectedLables.contains(e)
? widget.selectedColor
: widget.unSelectedColor,
color: disabled
? widget.disabledColor ?? widget.unSelectedColor
: selectedValues.contains(e)
? widget.selectedColor
: widget.unSelectedColor,
elevation: widget.elevation,
shape: widget.enableShape
? widget.customShape == null
Expand All @@ -240,33 +252,28 @@ class _CustomCheckBoxGroupState extends State<CustomCheckBoxGroup> {
shape: widget.enableShape
? widget.customShape == null
? OutlineInputBorder(
borderSide: BorderSide(color: borderColor(e), width: 1),
borderSide:
BorderSide(color: _borderColor(e), width: 1),
borderRadius:
BorderRadius.all(Radius.circular(widget.radius)),
)
: widget.customShape
: OutlineInputBorder(
borderSide: BorderSide(color: borderColor(e), width: 1),
borderSide: BorderSide(color: _borderColor(e), width: 1),
borderRadius: BorderRadius.zero,
),
onPressed: () {
if (selectedLables.contains(e)) {
selectedLables.remove(e);
} else {
selectedLables.add(e);
}
setState(() {});
widget.checkBoxButtonValues(selectedLables);
},
onPressed: disabled ? null : () => selectButton(e),
child: Text(
widget.buttonLables[index],
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: widget.buttonTextStyle.textStyle.copyWith(
color: selectedLables.contains(e)
? widget.buttonTextStyle.selectedColor
: widget.buttonTextStyle.unSelectedColor,
color: disabled
? widget.buttonTextStyle.disabledColor
: selectedValues.contains(e)
? widget.buttonTextStyle.selectedColor
: widget.buttonTextStyle.unSelectedColor,
),
),
),
Expand Down
Loading

0 comments on commit dca4208

Please sign in to comment.