Skip to content

M
multi_select_flutter
Commit 0c916a00 by Rizal Hermawan
Options

custom UI and fix bugs

parent 2b579b79
Showing with 46 additions and 118 deletions
lib/bottom_sheet/multi_select_bottom_sheet.dart
......@@ -6,6 +6,7 @@ import '../util/multi_select_list_type.dart';
/// A bottom sheet widget containing either a classic checkbox style list, or a chip style list.
class MultiSelectBottomSheet<V> extends StatefulWidget
with MultiSelectActions<V> {
final int validationSelectedLength;
/// List of items to select from.
final List<MultiSelectItem<V>> items;
......@@ -79,6 +80,7 @@ class MultiSelectBottomSheet<V> extends StatefulWidget
MultiSelectBottomSheet({
required this.items,
required this.initialValue,
this.validationSelectedLength = 5,
this.title,
this.onSelectionChanged,
this.onConfirm,
......@@ -318,7 +320,7 @@ class _MultiSelectBottomSheetState<V> extends State<MultiSelectBottomSheet<V>> {
child: TextButton(
onPressed: () {
widget.onConfirmTap(
context, _selectedValues, widget.onConfirm);
context, _selectedValues, widget.onConfirm, widget.validationSelectedLength);
},
child: widget.confirmText ??
Text(
......
lib/chip_display/multi_select_chip_display.dart
......@@ -132,11 +132,14 @@ class MultiSelectChipDisplay<V> extends StatelessWidget {
child: ChoiceChip(
shape: shape as OutlinedBorder?,
avatar: icon != null
? Icon(
? Padding(
padding: EdgeInsets.only(left: 4.0),
child: Icon(
icon!.icon,
color: colorator != null && colorator!(item.value) != null
? colorator!(item.value)!.withOpacity(1)
: icon!.color ?? Theme.of(context).primaryColor,
),
)
: null,
label: Container(
......@@ -144,26 +147,11 @@ class MultiSelectChipDisplay<V> extends StatelessWidget {
child: Text(
item.label,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: colorator != null && colorator!(item.value) != null
? textStyle != null
? textStyle!.color ?? colorator!(item.value)
: colorator!(item.value)
: textStyle != null && textStyle!.color != null
? textStyle!.color
: chipColor != null
? chipColor!.withOpacity(1)
: null,
fontSize: textStyle != null ? textStyle!.fontSize : null,
),
style: textStyle,
),
),
selected: items!.contains(item),
selectedColor: colorator != null && colorator!(item.value) != null
? colorator!(item.value)
: chipColor != null
? chipColor
: Theme.of(context).primaryColor.withOpacity(0.33),
selectedColor: chipColor,
onSelected: (_) {
if (onTap != null) onTap!(item.value);
},
......
lib/dialog/mult_select_dialog.dart
......@@ -5,6 +5,7 @@ import '../util/multi_select_list_type.dart';
/// A dialog containing either a classic checkbox style list, or a chip style list.
class MultiSelectDialog<V> extends StatefulWidget with MultiSelectActions<V> {
final int validationSelectedLength;
/// List of items to select from.
final List<MultiSelectItem<V>> items;
......@@ -75,6 +76,7 @@ class MultiSelectDialog<V> extends StatefulWidget with MultiSelectActions<V> {
MultiSelectDialog({
required this.items,
required this.initialValue,
this.validationSelectedLength = 5,
this.title,
this.onSelectionChanged,
this.onConfirm,
......@@ -163,25 +165,7 @@ class _MultiSelectDialogState<V> extends State<MultiSelectDialog<V>> {
label: Text(
item.label,
style: _selectedValues.contains(item.value)
? TextStyle(
color: widget.colorator != null &&
widget.colorator!(item.value) != null
? widget.selectedItemsTextStyle != null
? widget.selectedItemsTextStyle!.color ??
widget.colorator!(item.value)!.withOpacity(1)
: widget.colorator!(item.value)!.withOpacity(1)
: widget.selectedItemsTextStyle != null
? widget.selectedItemsTextStyle!.color ??
(widget.selectedColor != null
? widget.selectedColor!.withOpacity(1)
: Theme.of(context).primaryColor)
: widget.selectedColor != null
? widget.selectedColor!.withOpacity(1)
: null,
fontSize: widget.selectedItemsTextStyle != null
? widget.selectedItemsTextStyle!.fontSize
: null,
)
? widget.selectedItemsTextStyle
: widget.itemsTextStyle,
),
selected: _selectedValues.contains(item.value),
......@@ -297,7 +281,7 @@ class _MultiSelectDialogState<V> extends State<MultiSelectDialog<V>> {
),
),
onPressed: () {
widget.onConfirmTap(context, _selectedValues, widget.onConfirm);
widget.onConfirmTap(context, _selectedValues, widget.onConfirm, widget.validationSelectedLength);
},
)
],
......
lib/dialog/multi_select_dialog_field.dart
......@@ -8,18 +8,11 @@ import 'mult_select_dialog.dart';
/// A customizable InkWell widget that opens the MultiSelectDialog
// ignore: must_be_immutable
class MultiSelectDialogField<V> extends FormField<List<V>> {
final Widget titleForm;
final Widget showModalDialogWidget;
/// An enum that determines which type of list to render.
final MultiSelectListType? listType;
/// Style the Container that makes up the field.
final BoxDecoration? decoration;
/// Set text that is displayed on the button.
final Text? buttonText;
/// Specify the button icon.
final Icon? buttonIcon;
/// The text at the top of the dialog.
final Widget? title;
......@@ -98,13 +91,12 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
FormFieldState<List<V>>? state;
MultiSelectDialogField({
required this.titleForm,
required this.showModalDialogWidget,
required this.items,
required this.onConfirm,
this.title,
this.buttonText,
this.buttonIcon,
this.listType,
this.decoration,
this.onSelectionChanged,
this.chipDisplay,
this.searchable,
......@@ -139,11 +131,10 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
_MultiSelectDialogFieldView field =
_MultiSelectDialogFieldView<V>(
title: title,
titleForm: titleForm,
showModalDialogWidget: showModalDialogWidget,
items: items,
buttonText: buttonText,
buttonIcon: buttonIcon,
chipDisplay: chipDisplay,
decoration: decoration,
listType: listType,
onConfirm: onConfirm,
onSelectionChanged: onSelectionChanged,
......@@ -166,22 +157,21 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
selectedItemsTextStyle: selectedItemsTextStyle,
checkColor: checkColor,
);
return _MultiSelectDialogFieldView<V?>._withState(field as _MultiSelectDialogFieldView<V?>, state);
return _MultiSelectDialogFieldView<V>._withState(field as _MultiSelectDialogFieldView<V>, state);
});
}
// ignore: must_be_immutable
class _MultiSelectDialogFieldView<V> extends StatefulWidget {
final Widget titleForm;
final Widget showModalDialogWidget;
final MultiSelectListType? listType;
final BoxDecoration? decoration;
final Text? buttonText;
final Icon? buttonIcon;
final Widget? title;
final List<MultiSelectItem<V>> items;
final void Function(List<V>)? onSelectionChanged;
final MultiSelectChipDisplay<V>? chipDisplay;
final List<V>? initialValue;
final void Function(List<V>)? onConfirm;
final void Function(List<V>) onConfirm;
final bool? searchable;
final Text? confirmText;
final Text? cancelText;
......@@ -202,14 +192,13 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
FormFieldState<List<V>>? state;
_MultiSelectDialogFieldView({
required this.titleForm,
required this.showModalDialogWidget,
required this.items,
this.title,
this.buttonText,
this.buttonIcon,
this.listType,
this.decoration,
this.onSelectionChanged,
this.onConfirm,
required this.onConfirm,
this.chipDisplay,
this.initialValue,
this.searchable,
......@@ -235,11 +224,10 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
_MultiSelectDialogFieldView._withState(
_MultiSelectDialogFieldView<V> field, FormFieldState<List<V>> state)
: items = field.items,
showModalDialogWidget = field.showModalDialogWidget,
titleForm = field.titleForm,
title = field.title,
buttonText = field.buttonText,
buttonIcon = field.buttonIcon,
listType = field.listType,
decoration = field.decoration,
onSelectionChanged = field.onSelectionChanged,
onConfirm = field.onConfirm,
chipDisplay = field.chipDisplay,
......@@ -369,7 +357,7 @@ class __MultiSelectDialogFieldViewState<V>
widget.state!.didChange(selected);
}
_selectedItems = selected;
if (widget.onConfirm != null) widget.onConfirm!(selected);
widget.onConfirm(selected);
},
);
},
......@@ -381,64 +369,28 @@ class __MultiSelectDialogFieldViewState<V>
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
InkWell(
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
widget.titleForm,
Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
_showDialog(context);
},
child: Container(
decoration: widget.state != null
? widget.decoration ??
BoxDecoration(
border: Border(
bottom: BorderSide(
color: widget.state != null && widget.state!.hasError
? Colors.red.shade800.withOpacity(0.6)
: _selectedItems.isNotEmpty
? (widget.selectedColor != null &&
widget.selectedColor !=
Colors.transparent)
? widget.selectedColor!
: Theme.of(context).primaryColor
: Colors.black45,
width: _selectedItems.isNotEmpty
? (widget.state != null && widget.state!.hasError)
? 1.4
: 1.8
: 1.2,
),
child: widget.showModalDialogWidget
)
),
],
)
: widget.decoration,
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
widget.buttonText ?? Text("Select"),
widget.buttonIcon ?? Icon(Icons.arrow_downward),
],
),
),
),
_buildInheritedChipDisplay(),
widget.state != null && widget.state!.hasError
? SizedBox(height: 5)
: Container(),
widget.state != null && widget.state!.hasError
? Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 4),
child: Text(
widget.state!.errorText!,
style: TextStyle(
color: Colors.red[800],
fontSize: 12.5,
),
),
),
],
)
: Container(),
],
);
}
......
lib/util/multi_select_actions.dart
......@@ -21,8 +21,10 @@ class MultiSelectActions<V> {
/// Pops the dialog from the navigation stack and returns the selected values.
/// Calls the onConfirm function if one was provided.
void onConfirmTap(
BuildContext ctx, List<V> selectedValues, Function(List<V>)? onConfirm) {
BuildContext ctx, List<V> selectedValues, Function(List<V>)? onConfirm, int validationSelectedLength) {
if (selectedValues.length <= validationSelectedLength) {
Navigator.pop(ctx, selectedValues);
}
if (onConfirm != null) {
onConfirm(selectedValues);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment