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

Set initial value on MultiSelectField #1

Merged
merged 1 commit into from
Jul 6, 2020
Merged

Set initial value on MultiSelectField #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 26 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,34 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]
- Experiment with creating MultiSelectItems internally instead of making the user do it.
- Experiment with a multi select bottom sheet widget.

## [1.0.4] - 2020-07-06
### Changed
- Allow user to set initial selected values for MultiSelectField and MultiSelectFormField by
adding param 'initialValue' to MultiSelectField, and enabled the same functionality for
MultiSelectFormField by passing its existing 'initialValue' param to the
MultiSelectField's new 'initialValue' param.
- MultiSelectFormField creates a MultiSelectField which never had an 'initialValue' param
that could be set by the user. Even if 'initialValue' was set on the MultiSelectFormField,
it never got passed to the MultiSelectField that it creates. Now it does.
- Previously when using a MultiSelectField or FormField, the values in the
MultiSelectListDialog / MultiSelectChipDialog were only being stored
internally when a user confirms the values. Now the initial values can be set before any
user interaction has occurred.
- Another use case is when a MultiSelectField is being re-inserted into
the widget tree (such as one inside of a PersistentBottomSheet), and if the developer
wants the previously selected values to remain after the bottomsheet re-opens, they can use this parameter
to achieve that.
- Updated example app
- Updated readme
- Added unreleased section to changelog

## [1.0.3] - 2020-06-21
### Changed
- Updated pubsec.yaml project desctription and added homepage link
- Updated pubspec.yaml project description and added homepage link

## [1.0.2] - 2020-06-20
### Added
Expand Down
30 changes: 21 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,24 @@

Multi Select Flutter is a package for easily creating multi-select widgets in a variety of ways.

<img src="https://i.imgur.com/Tl7VjCc.gif" alt="drawing" width="200"/>
<img src="https://i.imgur.com/lNOkPtg.gif" alt="drawing" width="200"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="https://i.imgur.com/7ME7xZ5.gif" alt="drawing" width="200"/>

## Features
- Can use MultiSelectFormField for use with validators and other FormField methods.
- Neutral default design that can be altered to your heart's content.
- Easily switch the MultiSelectField's 'dialogType' from LIST to CHIP.
- Separate widget for MultiSelectChipDisplay that has the ability to delete from the selected items list when a chip item is tapped.
- Separate widgets for MultiSelectListDialog / MultiSelectChipDialog that you can simply use in the builder of showDialog(), and can be triggered with your own button.

## Install
Add this to your pubspec.yaml file:
```javascript
dependencies:
multi_select_flutter: ^1.0.4
```

## Usage

#### MultiSelectListDialog / MultiSelectChipDialog
Expand All @@ -17,8 +31,8 @@ These widgets can be used in the builder of showDialog().
_selectedItems = await showDialog(
context: context,
builder: (ctx) {
return MultiSelectListDialog<int>(
items: _Items.map((item) =>
return MultiSelectListDialog(
items: _items.map((item) =>
MultiSelectItem(item, item.name)).toList(),
title: "Dialog Title",
initialSelectedItems: _selectedItems,
Expand Down Expand Up @@ -73,29 +87,27 @@ MultiSelectField(
```

#### MultiSelectFormField
*MultiSelectFormField* is the FormField version of *MultiSelectField*. You can put it into a form and make use of FormField methods such as validate() and onSave().
*MultiSelectFormField* is the FormField version of *MultiSelectField*. You can put it into a form and make use of FormField parameters such as *validator* and *onSaved*.

It also comes with a default bottom-border that can be overriden with the **decoration** parameter.

```javascript
Form(
key: _formKey,
child: MultiSelectFormField(
key: _formFieldKey,
buttonIcon: Icon(Icons.arrow_forward_ios),
validator: (value) {
if (value == null || value.isEmpty) {
return "Required";
}
return null;
},
onSaved: (value) {
_selectedAnimals = value;
},
title: "Animals",
items: items,
dialogType: MultiSelectDialogType.CHIP,
onConfirm: (values) {
_formKey.currentState.validate();
_selectedAnimalItems = values;
_formFieldKey.currentState.validate();
},
chipDisplay: MultiSelectChipDisplay(
items: _selectedAnimalItems,
Expand Down
96 changes: 39 additions & 57 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ class _MyHomePageState extends State<MyHomePage> {
.toList();
List<String> _selectedAnimals;
List<String> _selectedAnimals2;
List<String> _selectedAnimals3;
List<String> _selectedAnimals4;
final _formKey = GlobalKey<FormState>();

Expand Down Expand Up @@ -111,72 +110,48 @@ class _MyHomePageState extends State<MyHomePage> {
Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor.withOpacity(.4),
borderRadius: BorderRadius.all(Radius.elliptical(10, 40)),
border: Border.all(
color: Theme.of(context).primaryColor,
width: 2,
),
),
width: 300,
child: MultiSelectField(
buttonText: "Favorite Animals",
title: "Animals",
items: items,
onConfirm: (results) {
setState(() {
_selectedAnimals2 = results;
});
},
textStyle: TextStyle(fontSize: 20),
chipDisplay: MultiSelectChipDisplay<String>(
items: _selectedAnimals2 != null
? _selectedAnimals2
.map((e) => MultiSelectItem<String>(e, e))
.toList()
: [],
onTap: (value) {
setState(() {
_selectedAnimals2.remove(value);
});
},
),
),
),
SizedBox(height: 40),
Form(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.green),
),
//################################################################################################
// MultiSelectFormField
//################################################################################################
child: MultiSelectFormField<String>(
buttonText: "Favorite Animals",
textStyle: TextStyle(color: Colors.green),
decoration: BoxDecoration(),
onConfirm: (values) {
setState(() {
_selectedAnimals3 = values;
});
},
title: "Hello",
items: items,
chipDisplay: MultiSelectChipDisplay(
chipColor: Colors.green[100],
textStyle: TextStyle(color: Colors.green),
onTap: (item) {
child: Column(
children: <Widget>[
MultiSelectField(
dialogType: MultiSelectDialogType.CHIP,
buttonText: "Favorite Animals",
title: "Animals",
items: items,
onConfirm: (results) {
setState(() {
_selectedAnimals3.remove(item);
_selectedAnimals2 = results;
});
},
items: _selectedAnimals3 != null
? _selectedAnimals3
.map((e) => MultiSelectItem(e, e))
.toList()
: [],
textStyle: TextStyle(fontSize: 20),
chipDisplay: MultiSelectChipDisplay<String>(
items: _selectedAnimals2 != null
? _selectedAnimals2
.map((e) => MultiSelectItem<String>(e, e))
.toList()
: [],
onTap: (value) {
setState(() {
_selectedAnimals2.remove(value);
});
},
),
),
),
_selectedAnimals2 == null || _selectedAnimals2.isEmpty
? Container(
padding: EdgeInsets.all(10),
alignment: Alignment.centerLeft,
child: Text(
"None selected",
style: TextStyle(color: Colors.black54),
))
: Container(),
],
),
),
SizedBox(height: 40),
Expand Down Expand Up @@ -227,6 +202,13 @@ class _MyHomePageState extends State<MyHomePage> {
),
),
),
SizedBox(height: 40),
RaisedButton(
child: Text("Submit"),
onPressed: () {
_formKey.currentState.validate();
},
)
],
),
),
Expand Down
7 changes: 5 additions & 2 deletions lib/multi_select_flutter.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@ class MultiSelectField<V> extends StatefulWidget {
final MultiSelectChipDisplay chipDisplay;
final FormFieldState<List<V>> state;
final double iconSize;
final List<V> initialValue;

MultiSelectField(
{@required this.title,
Expand All @@ -209,6 +210,7 @@ class MultiSelectField<V> extends StatefulWidget {
this.textStyle,
this.chipDisplay,
this.iconSize,
this.initialValue,
this.state});

@override
Expand All @@ -226,7 +228,7 @@ class _MultiSelectFieldState<V> extends State<MultiSelectField<V>> {
return MultiSelectChipDialog<V>(
items: widget.items,
title: widget.title != null ? widget.title : "Select",
initialSelectedItems: _selectedItems,
initialSelectedItems: widget.initialValue ?? _selectedItems,
onConfirm: (selected) {
if (widget.state != null) {
widget.state.didChange(selected);
Expand All @@ -239,7 +241,7 @@ class _MultiSelectFieldState<V> extends State<MultiSelectField<V>> {
return MultiSelectListDialog<V>(
items: widget.items,
title: widget.title != null ? widget.title : "Select",
initialSelectedItems: _selectedItems,
initialSelectedItems: widget.initialValue ?? _selectedItems,
onConfirm: (selected) {
if (widget.state != null) {
widget.state.didChange(selected);
Expand Down Expand Up @@ -440,6 +442,7 @@ class MultiSelectFormField<V> extends FormField<List<V>> {
onSelectionChanged: onSelectionChanged,
textStyle: textStyle,
iconSize: iconSize,
initialValue: initialValue ?? List<V>(),
);
});
}
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: multi_select_flutter
description: A flexible multi-select package for Flutter. Make multi-select widgets the way you want.
version: 1.0.3
version: 1.0.4
repository: https://github.com/CHB61/flutter-multi-select
issue_tracker: https://github.com/CHB61/flutter-multi-select
documentation: https://github.com/CHB61/flutter-multi-select
Expand Down