Select Group

For touch devices, a select tile group or select menu tile is generally recommended over this.

1enum Sidebar { recents, home, applications }
2
3class SelectGroupExample extends StatelessWidget {
4  @override
5  Widget build(BuildContext context) => Column(
6    mainAxisAlignment: .center,
7    children: [
8      FSelectGroup<Sidebar>(
9        control: const .managed(initial: {.recents}),
10        label: const Text('Sidebar'),
11        description: const Text('These will be shown in the sidebar.'),
12        children: [
13          .checkbox(value: .recents, label: const Text('Recents')),
14          .checkbox(value: .home, label: const Text('Home')),
15          .checkbox(value: .applications, label: const Text('Applications')),
16        ],
17      ),
18    ],
19  );
20}
21

CLI

To generate and customize this style:

dart run forui style create select-group

Usage

`FSelectGroup(...)`

1FSelectGroup<String>(
2  style: const .delta(itemPadding: .symmetric(vertical: 2)),
3  enabled: true,
4  children: [
5    .checkbox(value: 'apple', label: const Text('Apple')),
6    .checkbox(value: 'banana', label: const Text('Banana')),
7    .checkbox(value: 'cherry', label: const Text('Cherry')),
8  ],
9)

`FSelectGroupItemMixin.checkbox(...)`

1FSelectGroupItemMixin.checkbox<String>(
2  style: null,
3  value: 'apple',
4  enabled: true,
5  label: const Text('Apple'),
6  description: const Text('A red fruit'),
7  error: null,
8)

`FSelectGroupItemMixin.radio(...)`

1FSelectGroupItemMixin.radio<String>(
2  style: null,
3  value: 'apple',
4  enabled: true,
5  label: const Text('Apple'),
6  description: const Text('A red fruit'),
7  error: null,
8)

Examples

Checkbox Form

1enum Language { dart, java, rust, python }
2
3class SelectGroupCheckboxFormExample extends StatefulWidget {
4  @override
5  State<SelectGroupCheckboxFormExample> createState() =>
6      _SelectGroupCheckboxFormExampleState();
7}
8
9class _SelectGroupCheckboxFormExampleState
10    extends State<SelectGroupCheckboxFormExample> {
11  final _key = GlobalKey<FormState>();
12
13  @override
14  Widget build(BuildContext context) => Form(
15    key: _key,
16    child: Column(
17      mainAxisAlignment: .center,
18      crossAxisAlignment: .start,
19      spacing: 20,
20      children: [
21        FSelectGroup<Language>(
22          label: const Text('Favorite Languages'),
23          description: const Text('Your favorite language.'),
24          validator: (values) => values?.isEmpty ?? true
25              ? 'Please select at least one language.'
26              : null,
27          children: [
28            .checkbox(value: .dart, label: const Text('Dart')),
29            .checkbox(value: .java, label: const Text('Java')),
30            .checkbox(value: .rust, label: const Text('Rust')),
31            .checkbox(value: .python, label: const Text('Python')),
32          ],
33        ),
34        FButton(
35          child: const Text('Submit'),
36          onPress: () {
37            if (!_key.currentState!.validate()) {
38              // Handle errors here.
39              return;
40            }
41
42            _key.currentState!.save();
43            // Do something.
44          },
45        ),
46      ],
47    ),
48  );
49}
50

Radio Form

1enum Notification { all, direct, nothing }
2
3class SelectGroupRadioFormExample extends StatefulWidget {
4  @override
5  State<SelectGroupRadioFormExample> createState() =>
6      _SelectGroupRadioFormExampleState();
7}
8
9class _SelectGroupRadioFormExampleState
10    extends State<SelectGroupRadioFormExample> {
11  final _key = GlobalKey<FormState>();
12
13  @override
14  Widget build(BuildContext context) => Form(
15    key: _key,
16    child: Column(
17      mainAxisAlignment: .center,
18      crossAxisAlignment: .start,
19      spacing: 20,
20      children: [
21        FSelectGroup<Notification>(
22          control: const .managedRadio(),
23          label: const Text('Notifications'),
24          description: const Text('Select the notifications.'),
25          validator: (values) =>
26              values?.isEmpty ?? true ? 'Please select a value.' : null,
27          children: [
28            .radio(value: .all, label: const Text('All new messages')),
29            .radio(
30              value: .direct,
31              label: const Text('Direct messages and mentions'),
32            ),
33            .radio(value: .nothing, label: const Text('Nothing')),
34          ],
35        ),
36        FButton(
37          child: const Text('Save'),
38          onPress: () {
39            if (!_key.currentState!.validate()) {
40              // Handle errors here.
41              return;
42            }
43
44            _key.currentState!.save();
45            // Do something.
46          },
47        ),
48      ],
49    ),
50  );
51}
52

Select Group

On this page