Skip to content

Commit 6478491

Browse files
davigmacodedavigmacode
committed
Breaking changes, more type safety, add more features, and simplify few properties
1 parent 60ed3a9 commit 6478491

File tree

5 files changed

+101
-155
lines changed

5 files changed

+101
-155
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
## [3.0.0] - 2020-01-22
2+
3+
* Breaking changes, more type safety, add more features, and simplify few properties
4+
* Remove `isMultiChoice` property, instead use `SmartSelect<T>.single()` or `SmartSelect<T>.multiple()`
5+
* Remove `option` property, instead use `options` property and change its value from `SmartSelectOptionConfig` to `List<SmartSelectOption<T>>`
6+
* Remove `modal` property, instead use `modalType` to change how to open modal and `modalConfig` to configure modal header, modal style, etc
7+
* Remove `choice` property, instead use `choiceType` to change choice widget and `choiceConfig` to configure choice style, etc
8+
* Choice modal can have different title with trigger/tile widget by configuring `modalConfig.title`
9+
* Choice modal can have leading and trailing widget by configuring `modalConfig.leading` and `modalConfig.trailing`
10+
111
## [2.0.2] - 2019-12-25
212

313
* Upgrade Provider package to 4.0.0

‎README.md‎

Lines changed: 85 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ Smart select allows you to easily convert your usual form selects into dynamic p
1818
* Open choices modal in full page, bottom sheet, or popup dialog
1919
* Various choices input (radio, checkbox, switch, chips)
2020
* Grouping choices with sticky header
21-
* Customizable trigger widget (tile)
21+
* Customizable trigger/tile widget
2222
* Customizable modal style
2323
* Customizable modal header style
2424
* Customizable choices style
25-
* Customizable option input
25+
* Flexible option input
2626
* Filterable option
2727
* Async option
2828
* and many more
@@ -39,204 +39,139 @@ To read more about classes and other references used by `smart_select`, see the
3939

4040
## Single Choice
4141

42+
`SmartSelect<T>.single()`
43+
4244
```
4345
String value = 'flutter';
44-
List options = [
45-
{ 'value': 'ionic', 'title': 'Ionic' },
46-
{ 'value': 'flutter', 'title': 'Flutter' },
47-
{ 'value': 'react', 'title': 'React Native' },
46+
List<SmartSelectOption<String>> options = [
47+
SmartSelectOption<String>(value: 'ion', title: 'Ionic'),
48+
SmartSelectOption<String>(value: 'flu', title: 'Flutter'),
49+
SmartSelectOption<String>(value: 'rea', title: 'React Native'),
4850
];
4951
5052
@override
5153
Widget build(BuildContext context) {
52-
return SmartSelect(
54+
return SmartSelect<String>.single(
5355
title: 'Frameworks',
5456
value: value,
55-
option: SmartSelectOptionConfig(options),
56-
onChange: (val) => setState(() => value = val),
57+
options: options,
58+
onChange: (val) => setState(() => value = val)
5759
);
5860
}
5961
```
6062

6163
## Multiple Choice
6264

65+
`SmartSelect<T>.multiple()`
66+
6367
```
64-
List value = ['flutter'];
65-
List options = [
66-
{ 'value': 'ionic', 'title': 'Ionic' },
67-
{ 'value': 'flutter', 'title': 'Flutter' },
68-
{ 'value': 'react', 'title': 'React Native' },
68+
List<int> value = [2];
69+
List<SmartSelectOption<int>> frameworks = [
70+
SmartSelectOption<int>(value: 1, title: 'Ionic'),
71+
SmartSelectOption<int>(value: 2, title: 'Flutter'),
72+
SmartSelectOption<int>(value: 3, title: 'React Native'),
6973
];
7074
7175
@override
7276
Widget build(BuildContext context) {
73-
return SmartSelect(
77+
return SmartSelect<int>.multiple(
7478
title: 'Frameworks',
7579
value: value,
76-
isMultiChoice: true,
77-
option: SmartSelectOptionConfig(options),
80+
options: options,
7881
onChange: (val) => setState(() => value = val),
7982
);
8083
}
8184
```
8285

83-
## Open in Full Page
86+
## Build Option List
8487

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

8790
```
88-
String value = 'flutter';
89-
List options = [
90-
{ 'value': 'ionic', 'title': 'Ionic' },
91-
{ 'value': 'flutter', 'title': 'Flutter' },
92-
{ 'value': 'react', 'title': 'React Native' },
93-
];
94-
95-
@override
96-
Widget build(BuildContext context) {
97-
return SmartSelect(
98-
title: 'Frameworks',
99-
value: value,
100-
option: SmartSelectOptionConfig(options),
101-
modal: SmartSelectModalConfig(
102-
type: SmartSelectModalType.fullPage,
103-
),
104-
onChange: (val) => setState(() => value = val),
105-
);
106-
}
91+
SmartSelect.single/multiple(
92+
...,
93+
...,
94+
options: <SmartSelectOption<int>>[
95+
SmartSelectOption<int>(value: 1, title: 'Ionic'),
96+
SmartSelectOption<int>(value: 2, title: 'Flutter'),
97+
SmartSelectOption<int>(value: 3, title: 'React Native'),
98+
],
99+
);
107100
```
108101

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

111104
```
112-
String value = 'flutter';
113-
List options = [
114-
{ 'value': 'ionic', 'title': 'Ionic' },
115-
{ 'value': 'flutter', 'title': 'Flutter' },
116-
{ 'value': 'react', 'title': 'React Native' },
105+
List<Map<String, String>> days = [
106+
{ 'value': 'mon', 'title': 'Monday' },
107+
{ 'value': 'tue', 'title': 'Tuesday' },
108+
{ 'value': 'wed', 'title': 'Wednesday' },
109+
{ 'value': 'thu', 'title': 'Thursday' },
110+
{ 'value': 'fri', 'title': 'Friday' },
111+
{ 'value': 'sat', 'title': 'Saturday' },
112+
{ 'value': 'sun', 'title': 'Sunday' },
117113
];
118114
119-
@override
120-
Widget build(BuildContext context) {
121-
return SmartSelect(
122-
title: 'Frameworks',
123-
value: value,
124-
option: SmartSelectOptionConfig(options),
125-
modal: SmartSelectModalConfig(
126-
type: SmartSelectModalType.bottomSheet,
127-
),
128-
onChange: (val) => setState(() => value = val),
129-
);
130-
}
115+
SmartSelect.single/multiple(
116+
...,
117+
...,
118+
options: SmartSelectOption.listFrom<Map<String, String>, String>(
119+
source: days,
120+
value: (index, item) => item['value'],
121+
title: (index, item) => item['title'],
122+
),
123+
);
131124
```
132125

133-
## Open in Popup Dialog
126+
## Modal Type
134127

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

143-
@override
144-
Widget build(BuildContext context) {
145-
return SmartSelect(
146-
title: 'Frameworks',
147-
value: value,
148-
option: SmartSelectOptionConfig(options),
149-
modal: SmartSelectModalConfig(
150-
type: SmartSelectModalType.popupDialog,
151-
),
152-
onChange: (val) => setState(() => value = val),
153-
);
154-
}
155130
```
156-
157-
## Custom Trigger Widget
158-
131+
SmartSelect.single/multiple(
132+
...,
133+
...,
134+
// open in full page
135+
modalType: SmartSelectModalType.fullPage,
136+
// open in popup dialog
137+
modalType: SmartSelectModalType.popupDialog,
138+
// open in bottom sheet
139+
modalType: SmartSelectModalType.bottomSheet,
140+
);
159141
```
160-
String value = 'flutter';
161-
List options = [
162-
{ 'value': 'ionic', 'label': 'Ionic' },
163-
{ 'value': 'flutter', 'label': 'Flutter' },
164-
{ 'value': 'react', 'label': 'React Native' },
165-
];
166142

167-
@override
168-
Widget build(BuildContext context) {
169-
return SmartSelect(
170-
title: 'Frameworks',
171-
value: value,
172-
option: SmartSelectOptionConfig(options),
173-
builder: (context, state, showChoices) {
174-
return ListTile(
175-
title: Text(state.title),
176-
subtitle: Text(
177-
state.valueDisplay,
178-
style: TextStyle(color: Colors.grey),
179-
overflow: TextOverflow.ellipsis,
180-
maxLines: 1,
181-
),
182-
leading: CircleAvatar(
183-
backgroundColor: Colors.blue,
184-
child: Text(
185-
'${state.valueDisplay[0]}',
186-
style: TextStyle(color: Colors.white)
187-
),
188-
),
189-
trailing: Icon(Icons.keyboard_arrow_right, color: Colors.grey),
190-
onTap: () => showChoices(context),
191-
);
192-
},
193-
onChange: (val) => setState(() => value = val),
194-
);
195-
}
196-
```
143+
## Choice Type
197144

198-
## Custom Key Label and Value
145+
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:
199146

200147
```
201-
String value = 'flutter';
202-
List options = [
203-
{ 'id': 'ionic', 'text': 'Ionic' },
204-
{ 'id': 'flutter', 'text': 'Flutter' },
205-
{ 'id': 'react', 'text': 'React Native' },
206-
];
207-
208-
@override
209-
Widget build(BuildContext context) {
210-
return Column(
211-
children: [
212-
SmartSelect(
213-
title: 'Frameworks',
214-
value: value,
215-
option: SmartSelectOption(
216-
options,
217-
value: 'id',
218-
title: 'text',
219-
),
220-
onChange: (val) => setState(() => value = val),
221-
),
222-
SmartSelect(
223-
title: 'Frameworks',
224-
value: value,
225-
option: SmartSelectOption(
226-
options,
227-
value: (item) => item['id'],
228-
title: (item) => item['text'],
229-
),
230-
onChange: (val) => setState(() => value = val),
231-
)
232-
]
233-
);
234-
}
148+
SmartSelect.single(
149+
...,
150+
...,
151+
// default use radio
152+
choiceType: SmartSelectChoiceType.radios,
153+
// use chips
154+
choiceType: SmartSelectChoiceType.chips,
155+
);
156+
```
157+
```
158+
SmartSelect.multiple(
159+
...,
160+
...,
161+
// default use checkbox
162+
choiceType: SmartSelectChoiceType.checkboxes,
163+
// use chips
164+
choiceType: SmartSelectChoiceType.chips,
165+
// use switch
166+
choiceType: SmartSelectChoiceType.switches,
167+
);
235168
```
236169

237170
# Thanks
238171

239172
* [Framework7](https://framework7.io/)
173+
* [provider](https://pub.dev/packages/provider)
174+
* [sticky_headers](https://pub.dev/packages/sticky_headers)
240175

241176
# License
242177

‎example/pubspec.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ packages:
176176
path: ".."
177177
relative: true
178178
source: path
179-
version: "2.0.2"
179+
version: "3.0.0"
180180
source_span:
181181
dependency: transitive
182182
description:

‎lib/src/modal.dart‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import 'package:flutter/material.dart';
1+
import 'package:flutter/widgets.dart';
2+
import 'package:flutter/material.dart' show Scaffold;
23
import './model/modal_config.dart';
34
import './modal_header.dart';
45

‎pubspec.yaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ name: smart_select
22
description: Smart select allows you to easily convert your usual form selects into dynamic pages with various choices input.
33
author: Irfan Vigma Taufik<[email protected]>
44
homepage: https://github.com/davigmacode/flutter_smart_select
5-
version: 2.0.2
5+
version: 3.0.0
66

77
environment:
88
sdk: ">=2.1.0 <3.0.0"
99

1010
dependencies:
1111
flutter:
1212
sdk: flutter
13-
provider: ^4.0.0
14-
sticky_headers: ^0.1.8+1
13+
provider: ">=4.0.0 <5.0.0"
14+
sticky_headers: ">=0.1.8+1 <1.0.0"
1515

1616
dev_dependencies:
1717
flutter_test:

0 commit comments

Comments
 (0)