Skip to content

Commit

Permalink
Breaking changes, more type safety, add more features, and simplify f…
Browse files Browse the repository at this point in the history 
…ew properties
  • Loading branch information
@davigmacode
davigmacode committed Jan 22, 2020
1 parent 60ed3a9 commit 6478491
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 155 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
## [3.0.0] - 2020-01-22

* Breaking changes, more type safety, add more features, and simplify few properties
* Remove `isMultiChoice` property, instead use `SmartSelect<T>.single()` or `SmartSelect<T>.multiple()`
* Remove `option` property, instead use `options` property and change its value from `SmartSelectOptionConfig` to `List<SmartSelectOption<T>>`
* Remove `modal` property, instead use `modalType` to change how to open modal and `modalConfig` to configure modal header, modal style, etc
* Remove `choice` property, instead use `choiceType` to change choice widget and `choiceConfig` to configure choice style, etc
* Choice modal can have different title with trigger/tile widget by configuring `modalConfig.title`
* Choice modal can have leading and trailing widget by configuring `modalConfig.leading` and `modalConfig.trailing`

## [2.0.2] - 2019-12-25

* Upgrade Provider package to 4.0.0
Expand Down
235 changes: 85 additions & 150 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ Smart select allows you to easily convert your usual form selects into dynamic p
* Open choices modal in full page, bottom sheet, or popup dialog
* Various choices input (radio, checkbox, switch, chips)
* Grouping choices with sticky header
* Customizable trigger widget (tile)
* Customizable trigger/tile widget
* Customizable modal style
* Customizable modal header style
* Customizable choices style
* Customizable option input
* Flexible option input
* Filterable option
* Async option
* and many more
Expand All @@ -39,204 +39,139 @@ To read more about classes and other references used by `smart_select`, see the

## Single Choice

`SmartSelect<T>.single()`

```
String value = 'flutter';
List options = [
{ 'value': 'ionic', 'title': 'Ionic' },
{ 'value': 'flutter', 'title': 'Flutter' },
{ 'value': 'react', 'title': 'React Native' },
List<SmartSelectOption<String>> options = [
SmartSelectOption<String>(value: 'ion', title: 'Ionic'),
SmartSelectOption<String>(value: 'flu', title: 'Flutter'),
SmartSelectOption<String>(value: 'rea', title: 'React Native'),
];
@override
Widget build(BuildContext context) {
return SmartSelect(
return SmartSelect<String>.single(
title: 'Frameworks',
value: value,
option: SmartSelectOptionConfig(options),
onChange: (val) => setState(() => value = val),
options: options,
onChange: (val) => setState(() => value = val)
);
}
```

## Multiple Choice

`SmartSelect<T>.multiple()`

```
List value = ['flutter'];
List options = [
{ 'value': 'ionic', 'title': 'Ionic' },
{ 'value': 'flutter', 'title': 'Flutter' },
{ 'value': 'react', 'title': 'React Native' },
List<int> value = [2];
List<SmartSelectOption<int>> frameworks = [
SmartSelectOption<int>(value: 1, title: 'Ionic'),
SmartSelectOption<int>(value: 2, title: 'Flutter'),
SmartSelectOption<int>(value: 3, title: 'React Native'),
];
@override
Widget build(BuildContext context) {
return SmartSelect(
return SmartSelect<int>.multiple(
title: 'Frameworks',
value: value,
isMultiChoice: true,
option: SmartSelectOptionConfig(options),
options: options,
onChange: (val) => setState(() => value = val),
);
}
```

## Open in Full Page
## Build Option List

By default SmartSelect open choices modal in full page.
`options` property is `List<SmartSelectOption<T>>`, it can be input directly as in the example below

```
String value = 'flutter';
List options = [
{ 'value': 'ionic', 'title': 'Ionic' },
{ 'value': 'flutter', 'title': 'Flutter' },
{ 'value': 'react', 'title': 'React Native' },
];
@override
Widget build(BuildContext context) {
return SmartSelect(
title: 'Frameworks',
value: value,
option: SmartSelectOptionConfig(options),
modal: SmartSelectModalConfig(
type: SmartSelectModalType.fullPage,
),
onChange: (val) => setState(() => value = val),
);
}
SmartSelect.single/multiple(
...,
...,
options: <SmartSelectOption<int>>[
SmartSelectOption<int>(value: 1, title: 'Ionic'),
SmartSelectOption<int>(value: 2, title: 'Flutter'),
SmartSelectOption<int>(value: 3, title: 'React Native'),
],
);
```

## Open in Bottom Sheet
or it can be created from any list using helper provided by this package, like the example below

```
String value = 'flutter';
List options = [
{ 'value': 'ionic', 'title': 'Ionic' },
{ 'value': 'flutter', 'title': 'Flutter' },
{ 'value': 'react', 'title': 'React Native' },
List<Map<String, String>> days = [
{ 'value': 'mon', 'title': 'Monday' },
{ 'value': 'tue', 'title': 'Tuesday' },
{ 'value': 'wed', 'title': 'Wednesday' },
{ 'value': 'thu', 'title': 'Thursday' },
{ 'value': 'fri', 'title': 'Friday' },
{ 'value': 'sat', 'title': 'Saturday' },
{ 'value': 'sun', 'title': 'Sunday' },
];
@override
Widget build(BuildContext context) {
return SmartSelect(
title: 'Frameworks',
value: value,
option: SmartSelectOptionConfig(options),
modal: SmartSelectModalConfig(
type: SmartSelectModalType.bottomSheet,
),
onChange: (val) => setState(() => value = val),
);
}
SmartSelect.single/multiple(
...,
...,
options: SmartSelectOption.listFrom<Map<String, String>, String>(
source: days,
value: (index, item) => item['value'],
title: (index, item) => item['title'],
),
);
```

## Open in Popup Dialog
## Modal Type

```
String value = 'flutter';
List options = [
{ 'value': 'ionic', 'title': 'Ionic' },
{ 'value': 'flutter', 'title': 'Flutter' },
{ 'value': 'react', 'title': 'React Native' },
];
By default SmartSelect will open choices modal in full page. You can change it by changing the `modalType` property with this value:

@override
Widget build(BuildContext context) {
return SmartSelect(
title: 'Frameworks',
value: value,
option: SmartSelectOptionConfig(options),
modal: SmartSelectModalConfig(
type: SmartSelectModalType.popupDialog,
),
onChange: (val) => setState(() => value = val),
);
}
```

## Custom Trigger Widget

SmartSelect.single/multiple(
...,
...,
// open in full page
modalType: SmartSelectModalType.fullPage,
// open in popup dialog
modalType: SmartSelectModalType.popupDialog,
// open in bottom sheet
modalType: SmartSelectModalType.bottomSheet,
);
```
String value = 'flutter';
List options = [
{ 'value': 'ionic', 'label': 'Ionic' },
{ 'value': 'flutter', 'label': 'Flutter' },
{ 'value': 'react', 'label': 'React Native' },
];

@override
Widget build(BuildContext context) {
return SmartSelect(
title: 'Frameworks',
value: value,
option: SmartSelectOptionConfig(options),
builder: (context, state, showChoices) {
return ListTile(
title: Text(state.title),
subtitle: Text(
state.valueDisplay,
style: TextStyle(color: Colors.grey),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
leading: CircleAvatar(
backgroundColor: Colors.blue,
child: Text(
'${state.valueDisplay[0]}',
style: TextStyle(color: Colors.white)
),
),
trailing: Icon(Icons.keyboard_arrow_right, color: Colors.grey),
onTap: () => showChoices(context),
);
},
onChange: (val) => setState(() => value = val),
);
}
```
## Choice Type

## Custom Key Label and Value
By default SmartSelect will use radio for single choice and checkbox for multiple choice, but it can change by changing the `choiceType` with this value:

```
String value = 'flutter';
List options = [
{ 'id': 'ionic', 'text': 'Ionic' },
{ 'id': 'flutter', 'text': 'Flutter' },
{ 'id': 'react', 'text': 'React Native' },
];
@override
Widget build(BuildContext context) {
return Column(
children: [
SmartSelect(
title: 'Frameworks',
value: value,
option: SmartSelectOption(
options,
value: 'id',
title: 'text',
),
onChange: (val) => setState(() => value = val),
),
SmartSelect(
title: 'Frameworks',
value: value,
option: SmartSelectOption(
options,
value: (item) => item['id'],
title: (item) => item['text'],
),
onChange: (val) => setState(() => value = val),
)
]
);
}
SmartSelect.single(
...,
...,
// default use radio
choiceType: SmartSelectChoiceType.radios,
// use chips
choiceType: SmartSelectChoiceType.chips,
);
```
```
SmartSelect.multiple(
...,
...,
// default use checkbox
choiceType: SmartSelectChoiceType.checkboxes,
// use chips
choiceType: SmartSelectChoiceType.chips,
// use switch
choiceType: SmartSelectChoiceType.switches,
);
```

# Thanks

* [Framework7](https://framework7.io/)
* [provider](https://pub.dev/packages/provider)
* [sticky_headers](https://pub.dev/packages/sticky_headers)

# License

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 @@ -176,7 +176,7 @@ packages:
path: ".."
relative: true
source: path
version: "2.0.2"
version: "3.0.0"
source_span:
dependency: transitive
description:
Expand Down
3 changes: 2 additions & 1 deletion lib/src/modal.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart' show Scaffold;
import './model/modal_config.dart';
import './modal_header.dart';

Expand Down
6 changes: 3 additions & 3 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ name: smart_select
description: Smart select allows you to easily convert your usual form selects into dynamic pages with various choices input.
author: Irfan Vigma Taufik<[email protected]>
homepage: https://github.com/davigmacode/flutter_smart_select
version: 2.0.2
version: 3.0.0

environment:
sdk: ">=2.1.0 <3.0.0"

dependencies:
flutter:
sdk: flutter
provider: ^4.0.0
sticky_headers: ^0.1.8+1
provider: ">=4.0.0 <5.0.0"
sticky_headers: ">=0.1.8+1 <1.0.0"

dev_dependencies:
flutter_test:
Expand Down

0 comments on commit 6478491

Please sign in to comment.