Skip to content
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

Added readOnly feature for MultiSelectDialogField and MultiSelectBottomSheetField #117

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

Added readOnly feature for MultiSelectDialogField and MultiSelectBottomSheetField #117

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
cf8a483
addded readOnly feature for MultiSelectDialogField and MultiSelectBot…
akshay-virtoustack Jul 13, 2022
cce7369
Merge branch 'master' into added-readOnly
akshaydoshi2 Mar 6, 2023
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
144 changes: 144 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,150 @@ void _startAnimation(ScrollController controller) {
}
```

## Constructors

### MultiSelectDialog

| Parameter | Type | Description |
|---|---|---
| `backgroundColor` | Color | Set the background color of the dialog. |
| `cancelText` | Text | Specifies the cancel button text. |
| `checkColor` | Color | Set the color of the check in the checkbox. |
| `closeSearchIcon` | Icon | `Icon(Icons.close)` | The icon button that hides the search field . |
| `confirmText` | Text | Specifies the confirm button text. |
| `colorator` | Color | Function(V) Set the selected color of individual items based on their value. Applies to both chips and checkboxes. |
| `height` | double | Give the dialog a fixed height. |
| `initialValue` | List\<V> | List of selected values. Required to retain values when re-opening the dialog. |
| `items` | List\<MultiSelectItem\<V>> | The source list of options. |
| `itemsTextStyle` | TextStyle | Specifies the style of text on chips or list tiles. |
| `listType` | MultiSelectListType | Change the listType. Can be either &nbsp;`MultiSelectListType.LIST` or `MultiSelectListType.CHIP` |
| `onSelectionChanged` | Function(List\<V>) | Fires when an item is selected or unselected. |
| `onConfirm` | Function(List<V>) | Fires when the confirm button is pressed. |
| `searchable` | bool | Enables search functionality within the dialog. |
| `searchHintStyle` | TextStyle | Style the text of the search hint. |
| `searchIcon` | Icon | The icon button that shows the search field. |
| `searchHint` | String | Set the placeholder text of the search field. |
| `searchTextStyle` | TextStyle | Style the search text. |
| `selectedColor` | Color | Set the color of the checkbox or chip items that are selected. |
| `separateSelectedItems` | bool | Moves the selected items to the top of the list. |
| `title` | Widget | The title that is displayed at the top of the dialog. |
| `unselectedColor` | Color | Set the color of the chip body or checkbox border while not selected. |

### MultiSelectDialogField

MultiSelectDialogField has all the parameters of MultiSelectDialog plus these extra parameters:

| Parameter | Type | Description |
|---|---|---
| `autovalidateMode` | AutovalidateMode | If enabled, form fields will validate and update their error text immediately after every change. Default is disabled. |
| `barrierColor` | Color | Set the color of the space outside the dialog. |
| `buttonText` | Text | Set text that is displayed on the button. |
| `buttonIcon` | Icon | Specify the button icon. |
| `chipDisplay` | MultiSelectChipDisplay | Override the default MultiSelectChipDisplay that belongs to this field. |
| `decoration` | BoxDecoration | Style the Container that makes up the field. |
| `key` | GlobalKey\<FormFieldState> | Access FormFieldState methods. |
| `onSaved` | List\<MultiSelectItem> | A callback that is called whenever we submit the field (usually by calling the `save` method on a form. |
| `readOnly` | bool | If enabled, the MultiSelectDialogField will be readOnly. Default value is `false` |
| `validator` | FormFieldValidator\<List> | Validation. See [Flutter's documentation](https://flutter.dev/docs/cookbook/forms/validation). |

### MultiSelectBottomSheet

| Parameter | Type |Description |
|---|---|---
| `cancelText` | Text | Specifies the cancel button text. |
| `checkColor` | Color | Set the color of the check in the checkbox. |
| `confirmText` | Text | Specifies the confirm button text. |
| `closeSearchIcon` | Icon | The icon button that hides the search field . |
| `colorator` | Color Function(V) | Set the selected color of individual items based on their value. Applies to both chips and checkboxes. |
| `initialChildSize` | double | The initial height of the BottomSheet. Default is 0.3 |
| `initialValue` | List\<V> | List of selected values. Required to retain values when re-opening the BottomSheet. |
| `items` | List\<MultiSelectItem\<V>> | The source list of options. |
| `itemsTextStyle` | TextStyle | Specifies the style of text on chips or list tiles. |
| `listType` | MultiSelectListType | `MultiSelectListType.LIST` | Change the listType. Can be either &nbsp;`MultiSelectListType.LIST` or `MultiSelectListType.CHIP` |
| `maxChildSize` | double | Set the maximum height threshold of the BottomSheet. Default is 0.6 |
| `minChildSize` | double | Set the minimum height threshold of the BottomSheet before it closes. Default is 0.3 |
| `onSelectionChanged` | Function(List\<V>) | Fires when an item is selected or unselected. |
| `onConfirm` | Function(List<V>) | Fires when the confirm button is pressed. |
| `searchable` | bool | Toggle search functionality within the BottomSheet. |
| `searchHint` | String | Set the placeholder text of the search field. |
| `searchHintStyle` | TextStyle | Style the text of the search hint. |
| `searchIcon` | Icon | The icon button that shows the search field. |
| `searchTextStyle` | TextStyle | Style the search text. |
| `selectedColor` | Color | Set the color of the checkbox or chip items that are selected. |
| `separateSelectedItems` | bool | Moves the selected items to the top of the list. |
| `title` | Widget | The title that is displayed at the top of the BottomSheet. |
| `unselectedColor` | Color | Set the color of the chip body or checkbox border while not selected. |

### MultiSelectBottomSheetField

MultiSelectBottomSheetField has all the parameters of MultiSelectBottomSheet plus these extra parameters:

| Parameter | Type | Description |
|---|---|---
| `autovalidateMode` | AutovalidateMode | If enabled, form fields will validate and update their error text immediately after every change. Default is disabled. |
| `backgroundColor` | Color | Set the background color of the BottomSheet. |
| `barrierColor` | Color | Set the color of the space outside the BottomSheet. |
| `buttonIcon` | Icon | Specify the button icon. |
| `buttonText` | Text | Set text that is displayed on the button. |
| `chipDisplay` | MultiSelectChipDisplay | Override the default MultiSelectChipDisplay that belongs to this field. |
| `decoration` | BoxDecoration | Style the Container that makes up the field. |
| `key` | GlobalKey\<FormFieldState> | Can be used to call methods like `_multiSelectKey.currentState.validate()`. |
| `onSaved` | List\<MultiSelectItem> | A callback that is called whenever we submit the field (usually by calling the `save` method on a form. |
| `shape` | ShapeBorder | Apply a ShapeBorder to alter the edges of the BottomSheet. Default is a RoundedRectangleBorder with top circular radius of 15. |
| `readOnly` | bool | If enabled, the MultiSelectBottomSheetField will be readOnly. Default value is `false` |
| `validator` | FormFieldValidator\<List> | Validation. See [Flutter's documentation](https://flutter.dev/docs/cookbook/forms/validation). |

### MultiSelectChipField

| Parameter | Type | Description |
|---|---|---
| `autovalidateMode` | AutovalidateMode | If enabled, form fields will validate and update their error text immediately after every change. Default is disabled. |
| `chipColor` | Color | Set the chip color. |
| `chipShape` | ShapeBorde | Define a ShapeBorder for the chips. |
| `closeSearchIcon` | Icon | The icon button that hides the search field . |
| `colorator` | Color Function(V) | Set the selected chip color of individual items based on their value. |
| `decoration` | BoxDecoration | Style the surrounding Container. |
| `headerColor` | Color | Set the header color. |
| `height` | double | Set the height of the selectable area. |
| `icon` | Icon | The icon to display prior to the chip label. |
| `initialValue` | List\<V> | List of selected values before any interaction. |
| `itemBuilder` | Function(MultiSelectItem\<V>, FormFieldState\<List\<V>>) | Build a custom widget that gets created dynamically for each item. |
| `items` | List\<MultiSelectItem\<V>> | The source list of options. |
| `key` | GlobalKey\<FormFieldState> | Can be used to call methods like `_multiSelectKey.currentState.validate()`. |
| `onSaved` | List\<MultiSelectItem> | A callback that is called whenever the field is submitted (usually by calling the `save` method on a form. |
| `onTap` | Function(V) | Fires when a chip is tapped.
| `scroll` | bool | Enables horizontal scrolling. |
| `scrollBar` | HorizontalScrollBar | Define a scroll bar. |
| `scrollControl` | Function(ScrollController) | Make use of the ScrollController to automatically scroll through the list. |
| `searchable` | bool | Toggle search functionality. |
| `searchHint` | String | Set the placeholder text of the search field. |
| `searchHintStyle` | TextStyle | Style the text of the search hint. |
| `searchIcon` | Icon | The icon button that shows the search field. |
| `searchTextStyle` | TextStyle | Style the search text. |
| `selectedChipColor` | Color | Set the color of the chip items that are selected. |
| `selectedTextStyle` | TextStyle | Set the TextStyle on selected chips. |
| `showHeader` | bool | Determines whether to show the header. |
| `textStyle` | TextStyle | Style the text on the chips. |
| `title` | Widget | The title that is displayed in the header. |
| `validator` | FormFieldValidator\<List> | Validation. See [Flutter's documentation](https://flutter.dev/docs/cookbook/forms/validation). |

### MultiSelectChipDisplay

| Parameter | Type | Description |
|---|---|---
| `alignment` | Alignment | Change the alignment of the chips. Default is Alignment.centerLeft. |
| `chipColor` | Color | Set the chip color. |
| `colorator` | Color Function(V) | Set the chip color of individual items based on their value. |
| `decoration` | BoxDecoration | Style the Container that makes up the chip display. |
| `height` | double | Set a fixed height. |
| `icon` | Icon | The icon to display prior to the chip label. |
| `items` | List\<MultiSelectItem> | The source list of selected items. |
| `onTap` | Function(V) | Fires when a chip is tapped.
| `scroll` | bool | Enables horizontal scroll instead of wrap. |
| `scrollBar` | HorizontalScrollBar | Enable the scroll bar. |
| `shape` | ShapeBorder | Define a ShapeBorder for the chips. |
| `textStyle` | TextStyle | Style the text on the chips. |

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
12 changes: 11 additions & 1 deletion 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 @@ -103,6 +103,9 @@ class MultiSelectBottomSheetField<V> extends FormField<List<V>> {
/// Set the color of the check in the checkbox
final Color? checkColor;

/// Bool to set the multi-select-dialog-field readOnly
final bool readOnly;

/// Whether the user can dismiss the widget by tapping outside
final bool isDismissible;

Expand Down Expand Up @@ -149,6 +152,7 @@ class MultiSelectBottomSheetField<V> extends FormField<List<V>> {
this.onSaved,
this.validator,
this.autovalidateMode = AutovalidateMode.disabled,
this.readOnly = false
}) : super(
key: key,
onSaved: onSaved,
Expand Down Expand Up @@ -189,6 +193,7 @@ class MultiSelectBottomSheetField<V> extends FormField<List<V>> {
separateSelectedItems: separateSelectedItems,
shape: shape,
checkColor: checkColor,
readOnly: readOnly
isDismissible: isDismissible,
);
return _MultiSelectBottomSheetFieldView<V?>._withState(
Expand Down Expand Up @@ -229,6 +234,7 @@ class _MultiSelectBottomSheetFieldView<V> extends StatefulWidget {
final TextStyle? searchHintStyle;
final bool separateSelectedItems;
final Color? checkColor;
final bool readOnly;
final bool isDismissible;
FormFieldState<List<V>>? state;

Expand Down Expand Up @@ -264,6 +270,7 @@ class _MultiSelectBottomSheetFieldView<V> extends StatefulWidget {
this.selectedItemsTextStyle,
required this.separateSelectedItems,
this.checkColor,
this.readOnly = false,
required this.isDismissible,
});

Expand Down Expand Up @@ -301,6 +308,7 @@ class _MultiSelectBottomSheetFieldView<V> extends StatefulWidget {
selectedItemsTextStyle = field.selectedItemsTextStyle,
separateSelectedItems = field.separateSelectedItems,
checkColor = field.checkColor,
readOnly = field.readOnly,
isDismissible = field.isDismissible,
state = state;

Expand Down Expand Up @@ -446,7 +454,9 @@ class __MultiSelectBottomSheetFieldViewState<V>
children: <Widget>[
InkWell(
onTap: () {
_showBottomSheet(context);
if (!widget.readOnly) {
_showBottomSheet(context);
}
},
child: Container(
decoration: widget.state != null
Expand Down
12 changes: 11 additions & 1 deletion lib/dialog/multi_select_dialog_field.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
/// Set the color of the check in the checkbox
final Color? checkColor;

/// Bool to set the multi-select-dialog-field readOnly
final bool readOnly;

/// Whether the user can dismiss the widget by tapping outside
final bool isDismissible;

Expand Down Expand Up @@ -141,6 +144,7 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
this.initialValue = const [],
this.autovalidateMode = AutovalidateMode.disabled,
this.key,
this.readOnly = false
}) : super(
key: key,
onSaved: onSaved,
Expand Down Expand Up @@ -179,6 +183,7 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
selectedItemsTextStyle: selectedItemsTextStyle,
separateSelectedItems: separateSelectedItems,
checkColor: checkColor,
readOnly: readOnly
isDismissible: isDismissible,
);
return _MultiSelectDialogFieldView<V>._withState(field, state);
Expand Down Expand Up @@ -216,6 +221,7 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
final TextStyle? searchHintStyle;
final bool separateSelectedItems;
final Color? checkColor;
final bool readOnly;
final bool isDismissible;
FormFieldState<List<V>>? state;

Expand Down Expand Up @@ -249,6 +255,7 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
this.selectedItemsTextStyle,
this.separateSelectedItems = false,
this.checkColor,
this.readOnly = false
required this.isDismissible,
});

Expand Down Expand Up @@ -284,6 +291,7 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
selectedItemsTextStyle = field.selectedItemsTextStyle,
separateSelectedItems = field.separateSelectedItems,
checkColor = field.checkColor,
readOnly = field.readOnly,
isDismissible = field.isDismissible,
state = state;

Expand Down Expand Up @@ -423,7 +431,9 @@ class __MultiSelectDialogFieldViewState<V>
children: <Widget>[
InkWell(
onTap: () {
_showDialog(context);
if (!widget.readOnly) {
_showDialog(context);
}
},
child: Container(
decoration: widget.state != null
Expand Down