Skip to content

Add select all functionality #122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AhmedA1559 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add select all functionality #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0383aa
Refactor state and DRY
AhmedA1559 Jul 26, 2022
1d77ab7
Add Select All functionality
AhmedA1559 Jul 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 48 additions & 14 deletions lib/bottom_sheet/multi_select_bottom_sheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,18 @@ class MultiSelectBottomSheet<T> extends StatefulWidget
/// Toggles search functionality.
final bool searchable;

/// Toggles select all functionality. Default is false.
final bool selectAll;

/// Text on the confirm button.
final Text? confirmText;

/// Text on the cancel button.
final Text? cancelText;

/// Text on the select all button, if enabled.
final Text? selectAllText;

/// An enum that determines which type of list to render.
final MultiSelectListType? listType;

Expand Down Expand Up @@ -88,7 +94,9 @@ class MultiSelectBottomSheet<T> extends StatefulWidget
this.listType,
this.cancelText,
this.confirmText,
this.selectAllText,
this.searchable = false,
this.selectAll = false,
this.selectedColor,
this.initialChildSize,
this.minChildSize,
Expand Down Expand Up @@ -155,14 +163,8 @@ class _MultiSelectBottomSheetState<T> extends State<MultiSelectBottomSheet<T>> {
controlAffinity: ListTileControlAffinity.leading,
onChanged: (checked) {
setState(() {
_selectedValues = widget.onItemCheckedChange(
_selectedValues, item.value, checked!);
_setSelectedState(item, checked!);

if (checked) {
item.selected = true;
} else {
item.selected = false;
}
if (widget.separateSelectedItems) {
_items = widget.separateSelected(_items);
}
Expand Down Expand Up @@ -203,14 +205,8 @@ class _MultiSelectBottomSheetState<T> extends State<MultiSelectBottomSheet<T>> {
),
selected: item.selected,
onSelected: (checked) {
if (checked) {
item.selected = true;
} else {
item.selected = false;
}
setState(() {
_selectedValues = widget.onItemCheckedChange(
_selectedValues, item.value, checked);
_setSelectedState(item, checked);
});
if (widget.onSelectionChanged != null) {
widget.onSelectionChanged!(_selectedValues);
Expand All @@ -220,6 +216,24 @@ class _MultiSelectBottomSheetState<T> extends State<MultiSelectBottomSheet<T>> {
);
}

void _setSelectedState(MultiSelectItem item, bool checked) {
_selectedValues =
widget.onItemCheckedChange(_selectedValues, item.value, checked);

if (checked) {
item.selected = true;
} else {
item.selected = false;
}
}

void _selectAll(bool checked) {
_items.forEach((item) => _setSelectedState(item, checked));
if (widget.onSelectionChanged != null) {
widget.onSelectionChanged!(_selectedValues);
}
}

@override
Widget build(BuildContext context) {
return Container(
Expand Down Expand Up @@ -344,6 +358,26 @@ class _MultiSelectBottomSheetState<T> extends State<MultiSelectBottomSheet<T>> {
),
),
SizedBox(width: 10),
if (widget.selectAll)
Expanded(
child: TextButton(
onPressed: () {
setState(() => _selectAll(true));
},
child: widget.selectAllText ??
Text(
"SELECT ALL",
style: TextStyle(
color: (widget.selectedColor != null &&
widget.selectedColor !=
Colors.transparent)
? widget.selectedColor!.withOpacity(1)
: Theme.of(context).primaryColor,
),
),
),
),
if (widget.selectAll) SizedBox(width: 10),
Expanded(
child: TextButton(
onPressed: () {
Expand Down
18 changes: 18 additions & 0 deletions lib/bottom_sheet/multi_select_bottom_sheet_field.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,18 @@ class MultiSelectBottomSheetField<V> extends FormField<List<V>> {
/// Toggles search functionality.
final bool searchable;

/// Toggles select all functionality. Default is false.
final bool selectAll;

/// Text on the confirm button.
final Text? confirmText;

/// Text on the cancel button.
final Text? cancelText;

/// Text on the select all button, if enabled.
final Text? selectAllText;

/// An enum that determines which type of list to render.
final MultiSelectListType? listType;

Expand Down Expand Up @@ -121,8 +127,10 @@ class MultiSelectBottomSheetField<V> extends FormField<List<V>> {
this.chipDisplay,
this.initialValue,
this.searchable = false,
this.selectAll = false,
this.confirmText,
this.cancelText,
this.selectAllText,
this.selectedColor,
this.initialChildSize,
this.minChildSize,
Expand Down Expand Up @@ -181,6 +189,8 @@ class MultiSelectBottomSheetField<V> extends FormField<List<V>> {
searchHint: searchHint,
searchTextStyle: searchTextStyle,
searchable: searchable,
selectAll: selectAll,
selectAllText: selectAllText,
selectedColor: selectedColor,
separateSelectedItems: separateSelectedItems,
shape: shape,
Expand All @@ -202,8 +212,10 @@ class _MultiSelectBottomSheetFieldView<V> extends StatefulWidget {
final void Function(List<V>)? onSelectionChanged;
final void Function(List<V>)? onConfirm;
final bool searchable;
final bool selectAll;
final Text? confirmText;
final Text? cancelText;
final Text? selectAllText;
final MultiSelectListType? listType;
final Color? selectedColor;
final String? searchHint;
Expand Down Expand Up @@ -238,8 +250,10 @@ class _MultiSelectBottomSheetFieldView<V> extends StatefulWidget {
this.chipDisplay,
this.initialValue,
this.searchable = false,
this.selectAll = false,
this.confirmText,
this.cancelText,
this.selectAllText,
this.selectedColor,
this.initialChildSize,
this.minChildSize,
Expand Down Expand Up @@ -274,8 +288,10 @@ class _MultiSelectBottomSheetFieldView<V> extends StatefulWidget {
chipDisplay = field.chipDisplay,
initialValue = field.initialValue,
searchable = field.searchable,
selectAll = field.selectAll,
confirmText = field.confirmText,
cancelText = field.cancelText,
selectAllText = field.selectAllText,
selectedColor = field.selectedColor,
initialChildSize = field.initialChildSize,
minChildSize = field.minChildSize,
Expand Down Expand Up @@ -397,6 +413,7 @@ class __MultiSelectBottomSheetFieldViewState<V>
items: widget.items,
cancelText: widget.cancelText,
confirmText: widget.confirmText,
selectAllText: widget.selectAllText,
separateSelectedItems: widget.separateSelectedItems,
initialValue: _selectedItems,
onConfirm: (selected) {
Expand All @@ -408,6 +425,7 @@ class __MultiSelectBottomSheetFieldViewState<V>
},
onSelectionChanged: widget.onSelectionChanged,
searchable: widget.searchable,
selectAll: widget.selectAll,
title: widget.title,
initialChildSize: widget.initialChildSize,
minChildSize: widget.minChildSize,
Expand Down
57 changes: 43 additions & 14 deletions lib/dialog/mult_select_dialog.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,18 @@ class MultiSelectDialog<T> extends StatefulWidget with MultiSelectActions<T> {
/// Toggles search functionality. Default is false.
final bool searchable;

/// Toggles select all functionality. Default is false.
final bool selectAll;

/// Text on the confirm button.
final Text? confirmText;

/// Text on the cancel button.
final Text? cancelText;

/// Text on the select all button, if enabled.
final Text? selectAllText;

/// An enum that determines which type of list to render.
final MultiSelectListType? listType;

Expand Down Expand Up @@ -86,8 +92,10 @@ class MultiSelectDialog<T> extends StatefulWidget with MultiSelectActions<T> {
this.onConfirm,
this.listType,
this.searchable = false,
this.selectAll = false,
this.confirmText,
this.cancelText,
this.selectAllText,
this.selectedColor,
this.searchHint,
this.height,
Expand Down Expand Up @@ -153,14 +161,8 @@ class _MultiSelectDialogState<T> extends State<MultiSelectDialog<T>> {
controlAffinity: ListTileControlAffinity.leading,
onChanged: (checked) {
setState(() {
_selectedValues = widget.onItemCheckedChange(
_selectedValues, item.value, checked!);
_setSelectedState(item, checked!);

if (checked) {
item.selected = true;
} else {
item.selected = false;
}
if (widget.separateSelectedItems) {
_items = widget.separateSelected(_items);
}
Expand Down Expand Up @@ -196,14 +198,8 @@ class _MultiSelectDialogState<T> extends State<MultiSelectDialog<T>> {
),
selected: item.selected,
onSelected: (checked) {
if (checked) {
item.selected = true;
} else {
item.selected = false;
}
setState(() {
_selectedValues = widget.onItemCheckedChange(
_selectedValues, item.value, checked);
_setSelectedState(item, checked);
});
if (widget.onSelectionChanged != null) {
widget.onSelectionChanged!(_selectedValues);
Expand All @@ -213,6 +209,24 @@ class _MultiSelectDialogState<T> extends State<MultiSelectDialog<T>> {
);
}

void _setSelectedState(MultiSelectItem item, bool checked) {
_selectedValues = widget.onItemCheckedChange(
_selectedValues, item.value, checked);

if (checked) {
item.selected = true;
} else {
item.selected = false;
}
}

void _selectAll(bool checked) {
Copy link

@kvn-7 kvn-7 Jan 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to add a line here

_selectedValues=[];

_items.forEach((item) => _setSelectedState(item, checked));
if (widget.onSelectionChanged != null) {
widget.onSelectionChanged!(_selectedValues);
}
}

@override
Widget build(BuildContext context) {
return AlertDialog(
Expand Down Expand Up @@ -311,6 +325,21 @@ class _MultiSelectDialogState<T> extends State<MultiSelectDialog<T>> {
widget.onCancelTap(context, widget.initialValue);
},
),
if (widget.selectAll) TextButton(
child: widget.selectAllText ??
Text(
"SELECT ALL",
style: TextStyle(
color: (widget.selectedColor != null &&
widget.selectedColor != Colors.transparent)
? widget.selectedColor!.withOpacity(1)
: Theme.of(context).primaryColor,
),
),
onPressed: () {
setState(()=>_selectAll(true));
},
),
TextButton(
child: widget.confirmText ??
Text(
Expand Down
18 changes: 18 additions & 0 deletions lib/dialog/multi_select_dialog_field.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,18 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
/// Toggles search functionality.
final bool searchable;

/// Toggles select all functionality. Default is false.
final bool selectAll;

/// Text on the confirm button.
final Text? confirmText;

/// Text on the cancel button.
final Text? cancelText;

/// Text on the select all button, if enabled.
final Text? selectAllText;

/// Set the color of the space outside the BottomSheet.
final Color? barrierColor;

Expand Down Expand Up @@ -114,8 +120,10 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
this.onSelectionChanged,
this.chipDisplay,
this.searchable = false,
this.selectAll = false,
this.confirmText,
this.cancelText,
this.selectAllText,
this.barrierColor,
this.selectedColor,
this.searchHint,
Expand Down Expand Up @@ -157,8 +165,10 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
onSelectionChanged: onSelectionChanged,
initialValue: initialValue,
searchable: searchable,
selectAll: selectAll,
confirmText: confirmText,
cancelText: cancelText,
selectAllText: selectAllText,
barrierColor: barrierColor,
selectedColor: selectedColor,
searchHint: searchHint,
Expand Down Expand Up @@ -193,8 +203,10 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
final List<V>? initialValue;
final void Function(List<V>)? onConfirm;
final bool? searchable;
final bool? selectAll;
final Text? confirmText;
final Text? cancelText;
final Text? selectAllText;
final Color? barrierColor;
final Color? selectedColor;
final double? dialogHeight;
Expand Down Expand Up @@ -225,8 +237,10 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
this.chipDisplay,
this.initialValue,
this.searchable,
this.selectAll,
this.confirmText,
this.cancelText,
this.selectAllText,
this.barrierColor,
this.selectedColor,
this.searchHint,
Expand Down Expand Up @@ -259,8 +273,10 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
chipDisplay = field.chipDisplay,
initialValue = field.initialValue,
searchable = field.searchable,
selectAll = field.selectAll,
confirmText = field.confirmText,
cancelText = field.cancelText,
selectAllText = field.selectAllText,
barrierColor = field.barrierColor,
selectedColor = field.selectedColor,
dialogHeight = field.dialogHeight,
Expand Down Expand Up @@ -380,8 +396,10 @@ class __MultiSelectDialogFieldViewState<V>
title: widget.title ?? const Text("Select"),
initialValue: _selectedItems,
searchable: widget.searchable ?? false,
selectAll: widget.selectAll ?? false,
confirmText: widget.confirmText,
cancelText: widget.cancelText,
selectAllText: widget.selectAllText,
separateSelectedItems: widget.separateSelectedItems,
onConfirm: (selected) {
if (widget.state != null) {
Expand Down