|
1 | 1 | # smart_select |
2 | 2 |
|
3 | | -Smart select allows you to easily convert your usual form selects to dynamic pages with grouped radio or checkbox inputs. |
| 3 | +Smart select allows you to easily convert your usual form selects to dynamic pages with grouped radio or checkbox inputs. This widget is inspired by Smart Select component from [Framework7](https://framework7.io/). |
| 4 | + |
| 5 | +To read more about `smart_select`, see the [documentation](https://pub.dev/documentation/smart_select/latest/). |
| 6 | + |
| 7 | +# Features |
| 8 | + |
| 9 | +* Select single or multiple choice |
| 10 | +* Open options in page, bottom sheet, or popup dialog |
| 11 | +* Grouping options with sticky header |
| 12 | +* Customizable trigger widget |
| 13 | +* Customizable options item widget |
| 14 | +* Customizable label, value, and group field |
| 15 | +* Filterable option item |
| 16 | + |
| 17 | +# Usage |
| 18 | + |
| 19 | +## Single Choice |
| 20 | + |
| 21 | +``` |
| 22 | +String value = 'flutter'; |
| 23 | +List options = [ |
| 24 | + { 'value': 'ionic', 'label': 'Ionic' }, |
| 25 | + { 'value': 'flutter', 'label': 'Flutter' }, |
| 26 | + { 'value': 'react', 'label': 'React Native' }, |
| 27 | +]; |
| 28 | +
|
| 29 | +@override |
| 30 | +Widget build(BuildContext context) { |
| 31 | + return SmartSelect( |
| 32 | + title: 'Frameworks', |
| 33 | + value: value, |
| 34 | + option: SmartSelectOption(options), |
| 35 | + onChange: (val) => setState(() => value = val), |
| 36 | + ); |
| 37 | +} |
| 38 | +``` |
| 39 | + |
| 40 | +## Multiple Choice |
| 41 | + |
| 42 | +``` |
| 43 | +List value = ['flutter']; |
| 44 | +List options = [ |
| 45 | + { 'value': 'ionic', 'label': 'Ionic' }, |
| 46 | + { 'value': 'flutter', 'label': 'Flutter' }, |
| 47 | + { 'value': 'react', 'label': 'React Native' }, |
| 48 | +]; |
| 49 | +
|
| 50 | +@override |
| 51 | +Widget build(BuildContext context) { |
| 52 | + return SmartSelect( |
| 53 | + title: 'Frameworks', |
| 54 | + value: value, |
| 55 | + option: SmartSelectOption(options), |
| 56 | + isMultiChoice: true, |
| 57 | + onChange: (val) => setState(() => value = val), |
| 58 | + ); |
| 59 | +} |
| 60 | +``` |
| 61 | + |
| 62 | +## Open in Page |
| 63 | + |
| 64 | +By default SmartSelect open options in page. |
| 65 | + |
| 66 | +``` |
| 67 | +String value = 'flutter'; |
| 68 | +List options = [ |
| 69 | + { 'value': 'ionic', 'label': 'Ionic' }, |
| 70 | + { 'value': 'flutter', 'label': 'Flutter' }, |
| 71 | + { 'value': 'react', 'label': 'React Native' }, |
| 72 | +]; |
| 73 | +
|
| 74 | +@override |
| 75 | +Widget build(BuildContext context) { |
| 76 | + return SmartSelect( |
| 77 | + title: 'Frameworks', |
| 78 | + value: value, |
| 79 | + option: SmartSelectOption(options), |
| 80 | + target: SmartSelectTarget.page, |
| 81 | + onChange: (val) => setState(() => value = val), |
| 82 | + ); |
| 83 | +} |
| 84 | +``` |
| 85 | + |
| 86 | +## Open in Bottom Sheet |
| 87 | + |
| 88 | +``` |
| 89 | +String value = 'flutter'; |
| 90 | +List options = [ |
| 91 | + { 'value': 'ionic', 'label': 'Ionic' }, |
| 92 | + { 'value': 'flutter', 'label': 'Flutter' }, |
| 93 | + { 'value': 'react', 'label': 'React Native' }, |
| 94 | +]; |
| 95 | +
|
| 96 | +@override |
| 97 | +Widget build(BuildContext context) { |
| 98 | + return SmartSelect.sheet( |
| 99 | + title: 'Frameworks', |
| 100 | + value: value, |
| 101 | + option: SmartSelectOption(options), |
| 102 | + onChange: (val) => setState(() => value = val), |
| 103 | + ); |
| 104 | +} |
| 105 | +``` |
| 106 | + |
| 107 | +## Open in Popup Dialog |
| 108 | + |
| 109 | +``` |
| 110 | +String value = 'flutter'; |
| 111 | +List options = [ |
| 112 | + { 'value': 'ionic', 'label': 'Ionic' }, |
| 113 | + { 'value': 'flutter', 'label': 'Flutter' }, |
| 114 | + { 'value': 'react', 'label': 'React Native' }, |
| 115 | +]; |
| 116 | +
|
| 117 | +@override |
| 118 | +Widget build(BuildContext context) { |
| 119 | + return SmartSelect.popup( |
| 120 | + title: 'Frameworks', |
| 121 | + value: value, |
| 122 | + option: SmartSelectOption(options), |
| 123 | + onChange: (val) => setState(() => value = val), |
| 124 | + ); |
| 125 | +} |
| 126 | +``` |
| 127 | + |
| 128 | +## Custom Trigger Widget |
| 129 | + |
| 130 | +``` |
| 131 | +String value = 'flutter'; |
| 132 | +List options = [ |
| 133 | + { 'value': 'ionic', 'label': 'Ionic' }, |
| 134 | + { 'value': 'flutter', 'label': 'Flutter' }, |
| 135 | + { 'value': 'react', 'label': 'React Native' }, |
| 136 | +]; |
| 137 | +
|
| 138 | +@override |
| 139 | +Widget build(BuildContext context) { |
| 140 | + return SmartSelect.popup( |
| 141 | + title: 'Frameworks', |
| 142 | + value: value, |
| 143 | + option: SmartSelectOption(options), |
| 144 | + builder: (context, state) { |
| 145 | + return ListTile( |
| 146 | + title: Text(state.title), |
| 147 | + subtitle: Text( |
| 148 | + state.valueDisplay, |
| 149 | + style: TextStyle(color: Colors.grey), |
| 150 | + overflow: TextOverflow.ellipsis, |
| 151 | + maxLines: 1, |
| 152 | + ), |
| 153 | + leading: CircleAvatar( |
| 154 | + backgroundColor: Colors.blue, |
| 155 | + child: Text( |
| 156 | + '${state.valueDisplay[0]}', |
| 157 | + style: TextStyle(color: Colors.white) |
| 158 | + ), |
| 159 | + ), |
| 160 | + trailing: Icon(Icons.keyboard_arrow_right, color: Colors.grey), |
| 161 | + onTap: () => state.showOptions(context), |
| 162 | + ); |
| 163 | + }, |
| 164 | + onChange: (val) => setState(() => value = val), |
| 165 | + ); |
| 166 | +} |
| 167 | +``` |
| 168 | + |
| 169 | +## Custom Key Label and Value |
| 170 | + |
| 171 | +``` |
| 172 | +String value = 'flutter'; |
| 173 | +List options = [ |
| 174 | + { 'id': 'ionic', 'text': 'Ionic' }, |
| 175 | + { 'id': 'flutter', 'text': 'Flutter' }, |
| 176 | + { 'id': 'react', 'text': 'React Native' }, |
| 177 | +]; |
| 178 | +
|
| 179 | +@override |
| 180 | +Widget build(BuildContext context) { |
| 181 | + return SmartSelect.popup( |
| 182 | + title: 'Frameworks', |
| 183 | + value: value, |
| 184 | + option: SmartSelectOption( |
| 185 | + options, |
| 186 | + label: 'id', |
| 187 | + value: 'text', |
| 188 | + ), |
| 189 | + onChange: (val) => setState(() => value = val), |
| 190 | + ); |
| 191 | +} |
| 192 | +``` |
| 193 | + |
| 194 | +# Reference |
| 195 | + |
| 196 | +| Name | Type | Description | |
| 197 | +|------|------|-------------| |
| 198 | +| SmartSelect | Class | General usage | |
| 199 | +| SmartSelectTile | Class | Default trigger widget | |
| 200 | +| SmartSelectOption | Class | Configure option | |
| 201 | +| SmartSelectState | Class | Current state | |
| 202 | +| SmartSelectTarget | Enum | Modal type to open option | |
| 203 | +| SmartSelectOnChange | Typedef | Callback to handle change of value widget | |
| 204 | +| SmartSelectBuilder | Typedef | Builder for custom trigger widget | |
| 205 | +| SmartSelectOptionItemBuilder | Typedef | Builder for custom option item | |
| 206 | +| SmartSelectOptionItemOnChange | Typedef | Callback to handle stats of each custom option item | |
| 207 | +| SmartSelectOptionDividerBuilder | Typedef | Builder for custom option divider | |
| 208 | +| SmartSelectOptionGroupHeaderBuilder | Typedef | Builder for custom option group header | |
| 209 | +| SmartSelectOptionConfirmationBuilder | Typedef | Builder for custom confirmation widget | |
| 210 | +| SmartSelectOptionHeaderTheme | Class | Configure option header theme | |
| 211 | +| SmartSelectOptionItemTheme | Class | Configure option item theme | |
| 212 | +| SmartSelectOptionGroupHeaderTheme | Class | Configure option group header theme | |
| 213 | + |
| 214 | +# Thanks |
| 215 | + |
| 216 | +* [Framework7](https://framework7.io/) |
| 217 | + |
| 218 | +# TODO |
| 219 | + |
| 220 | +* Use chip as option item |
| 221 | +* Support dark mode |
| 222 | + |
| 223 | +# License |
| 224 | + |
| 225 | +Copyright (c) 2019 Irfan Vigma Taufik |
| 226 | + |
| 227 | +Permission is hereby granted, free of charge, to any person obtaining a copy |
| 228 | +of this software and associated documentation files (the "Software"), to deal |
| 229 | +in the Software without restriction, including without limitation the rights |
| 230 | +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 231 | +copies of the Software, and to permit persons to whom the Software is |
| 232 | +furnished to do so, subject to the following conditions: |
| 233 | + |
| 234 | +The above copyright notice and this permission notice shall be included in all |
| 235 | +copies or substantial portions of the Software. |
| 236 | + |
| 237 | +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 238 | +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 239 | +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 240 | +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 241 | +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 242 | +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
| 243 | +SOFTWARE. |
0 commit comments