The successor to smart_select and chips_choice with cleaner, more flexible, and composable API for creating inline or prompted choice widgets with single or multiple selection.
- Cleaner, flexible, and composable API
- Inline or prompted choice widget
- Single or multiple choice widget
- Searchable choice items with highlighted result
- Specifies whether the choice selection needs to be confirmed
- Use any type of choice data and load it easily, either synchronously or asynchronously
- Build your own choice item that fits your needs
- Groupable choice items that can be sorted
- Supports leading and trailing choice items, as well as divider choice items
- Use a predefined wrapped, scrollable, virtualized choice list, or build one that fits your needs
- Use a predefined popup dialog, bottom sheet, new page prompt, or build one that fits your needs
- Use a predefined modal header, footer, and separator, or build one that fits your needs
- Use a predefined group list, group item, and group header, or build one that fits your needs
- Use a predefined anchor widget or build one that fits your needs
- Use a predefined widget on loading, on error, and placeholder when empty, or build one that fits your needs
For a complete usage, please see the example.
To read more about classes and other references used by choice, see the API Reference.
There are a few constructors to create a single selection choice widget:
By default, the choice controller maintains the selection state within a List. Any constructors other than those dedicated to single choice will have a List<T> for their value and onChanged prop. If we want to use a single value of T, we can use ChoiceSingle.value adapter to fill the value prop and ChoiceSingle.onChanged adapter to fill the onChanged prop.
Here is an example of how to use the ChoiceSingle.value and ChoiceSingle.onChanged adapters
import 'package:flutter/material.dart';
import 'package:choice/choice.dart';
class InlineScrollableX extends StatefulWidget {
const InlineScrollableX({super.key});
@override
State<InlineScrollableX> createState() => _InlineScrollableXState();
}
class _InlineScrollableXState extends State<InlineScrollableX> {
List<String> choices = [
'News',
'Entertainment',
'Politics',
'Automotive',
'Sports',
'Education',
'Fashion',
'Travel',
'Food',
'Tech',
'Science',
'Arts'
];
String? selectedValue;
void setSelectedValue(String? value) {
setState(() => selectedValue = value);
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Choice<String>.inline(
clearable: true,
value: ChoiceSingle.value(selectedValue),
onChanged: ChoiceSingle.onChanged(setSelectedValue),
itemCount: choices.length,
itemBuilder: (state, i) {
return ChoiceChip(
selected: state.selected(choices[i]),
onSelected: state.onSelected(choices[i]),
label: Text(choices[i]),
);
},
listBuilder: ChoiceList.createScrollable(
spacing: 10,
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 25,
),
),
),
InlineChoice<String>.single(
clearable: true,
value: selectedValue,
onChanged: setSelectedValue,
itemCount: choices.length,
itemBuilder: (state, i) {
return ChoiceChip(
selected: state.selected(choices[i]),
onSelected: state.onSelected(choices[i]),
label: Text(choices[i]),
);
},
listBuilder: ChoiceList.createWrapped(
spacing: 10,
runSpacing: 10,
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 25,
),
),
),
],
);
}
}
There are a few constructors to create an multiple selection choice widget:
There are a few constructors to create an inline choice widget:
There are a few constructors to create a prompted choice widget:
- ✅ Grouped choice items
- ❌ Sortable choice items better to do this outside
- 🔲 Add scroll wheel list
- 🔲 Add dropdown choice widget
- 🔲 Add chainable choice widget
Sponsoring
If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.