Form
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 or select menu tile is generally recommended over this.
FSelectGroup<Sidebar>(
control: const FSelectGroupControl.managed(initial: {Sidebar.recents}),
label: const Text('Sidebar'),
description: const Text('These will be shown in the sidebar.'),
children: [
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')),
],
);CLI
To generate and customize this style:
dart run forui style create select-groupUsage
FSelectGroup(...)
FSelectGroup<Value>(
control: FSelectGroupControl.managed(
initial: {Value.checkbox},
onChange: (all) {},
onSelect: (selection) {},
),
style: (style) => style.copyWith(...),
label: const Text('Sidebar'),
description: const Text('Select the items you want to display in the sidebar.'),
children: [
FSelectGroupItem.checkbox(value: Value.checkbox, label: const Text('Checkbox')),
// or
FSelectGroupItem.radio(value: Value.radio, label: const Text('Radio')),
],
);Examples
Checkbox Form
class CheckboxForm extends StatefulWidget {
@override
State<CheckboxForm> createState() => _CheckboxFormState();
}
class _CheckboxFormState extends State<CheckboxForm> {
final _key = GlobalKey<FormState>();
@override
Widget build(BuildContext context) => Form(
key: _key,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FSelectGroup<Language>(
label: const Text('Favorite Languages'),
description: const Text('Your favorite language.'),
validator: (values) => values?.isEmpty ?? true ? 'Please select at least one language.' : null,
children: [
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(
child: const Text('Submit'),
onPress: () {
if (!_key.currentState!.validate()) {
// Handle errors here.
return;
}
_key.currentState!.save();
// Do something.
},
),
],
),
);
}Radio Form
enum Notification { all, direct, nothing }
class RadioForm extends StatefulWidget {
@override
State<RadioForm> createState() => _RadioFormState();
}
class _RadioFormState extends State<RadioForm> {
final _key = GlobalKey<FormState>();
final _controller = FMultiValueNotifier<Notification>.radio();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => Form(
key: _key,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FSelectGroup<Notification>(
control: FSelectGroupControl.managed(controller: _controller),
label: const Text('Notifications'),
description: const Text('Select the notifications.'),
validator: (values) => values?.isEmpty ?? true ? 'Please select a value.' : null,
children: [
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(
child: const Text('Save'),
onPress: () {
if (!_key.currentState!.validate()) {
// Handle errors here.
return;
}
_key.currentState!.save();
// Do something.
},
),
],
),
);
}