Select Group
A group of items that allow users to make a selection from a set of options.
For touch devices, a select tile group is generally recommended over this.
enum Sidebar { recents, home, applications }
FSelectGroup<Sidebar>(
controller: FMultiSelectGroupController(values: {Sidebar.recents}),
label: const Text('Sidebar'),
description: const Text('These will be shown in the sidebar.'),
items: [
FSelectGroupItem.checkbox(
value: Sidebar.recents,
label: const Text('Recents'),
),
FSelectGroupItem.checkbox(
value: Sidebar.home,
label: const Text('Home'),
),
FSelectGroupItem.checkbox(
value: Sidebar.applications,
label: const Text('Applications'),
),
],
);Usage
FSelectGroup(...)
FSelectGroup<Value>(
controller: FMultiSelectGroupController(), // or FRadioSelectGroupController()
label: const Text('Sidebar'),
description: const Text('Select the items you want to display in the sidebar.'),
items: [
FSelectGroupItem.checkbox(
value: Value.checkbox,
label: const Text('Checkbox'),
),
// or
FSelectGroupItem.radio(
value: Value.radio,
label: const Text('Radio'),
),
],
);Examples
Checkbox Form
enum Language { dart, java, rust, python }
class CheckboxForm extends StatefulWidget {
const CheckboxForm({super.key});
@override
State<CheckboxForm> createState() => CheckboxFormState();
}
class CheckboxFormState extends State<CheckboxForm> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final FMultiSelectGroupController<Language> controller = FMultiSelectGroupController();
@override
Widget build(BuildContext context) => Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FSelectGroup(
controller: controller,
label: const Text('Favorite Languages'),
description: const Text('Your favorite language.'),
validator: (values) => values?.isEmpty ?? true ? 'Please select at least one language.' : null,
items: [
FSelectGroupItem.checkbox(
value: Language.dart,
label: const Text('Dart'),
),
FSelectGroupItem.checkbox(
value: Language.java,
label: const Text('Java'),
),
FSelectGroupItem.checkbox(
value: Language.rust,
label: const Text('Rust'),
),
FSelectGroupItem.checkbox(
value: Language.python,
label: const Text('Python'),
),
],
),
const SizedBox(height: 20),
FButton(
label: const Text('Submit'),
onPress: () {
if (!_formKey.currentState!.validate()) {
// Handle errors here.
return;
}
_formKey.currentState!.save();
// Do something.
},
),
],
),
);
@override
void dispose() {
controller.dispose();
super.dispose();
}
}Radio Form
enum Notification { all, direct, nothing }
class RadioForm extends StatefulWidget {
const RadioForm({super.key});
@override
State<RadioForm> createState() => RadioFormState();
}
class RadioFormState extends State<RadioForm> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final FRadioSelectGroupController<Notification> controller = FRadioSelectGroupController();
@override
Widget build(BuildContext context) => Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FSelectGroup(
controller: controller,
label: const Text('Notifications'),
description: const Text('Select the notifications.'),
validator: (values) => values?.isEmpty ?? true ? 'Please select a value.' : null,
items: [
FSelectGroupItem.radio(
value: Notification.all,
label: const Text('All new messages'),
),
FSelectGroupItem.radio(
value: Notification.direct,
label: const Text('Direct messages and mentions'),
),
FSelectGroupItem.radio(
value: Notification.nothing,
label: const Text('Nothing'),
),
],
),
const SizedBox(height: 20),
FButton(
label: const Text('Save'),
onPress: () {
if (!_formKey.currentState!.validate()) {
// Handle errors here.
return;
}
_formKey.currentState!.save();
// Do something.
},
),
],
),
);
@override
void dispose() {
controller.dispose();
super.dispose();
}
}