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 a specific style for customization:

dart run forui style create select-group

Usage

`FSelectGroup(...)`

1FSelectGroup<String>(
2  style: const .delta(itemPadding: .value(.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        Row(
35          mainAxisAlignment: .end,
36          children: [
37            FButton(
38              size: .sm,
39              mainAxisSize: .min,
40              child: const Text('Submit'),
41              onPress: () {
42                if (_key.currentState!.validate()) {
43                  // Form is valid, do something.
44                }
45              },
46            ),
47          ],
48        ),
49      ],
50    ),
51  );
52}
53

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: 16,
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        Row(
37          mainAxisAlignment: .end,
38          children: [
39            FButton(
40              size: .sm,
41              mainAxisSize: .min,
42              child: const Text('Save'),
43              onPress: () {
44                if (_key.currentState!.validate()) {
45                  // Form is valid, do something.
46                }
47              },
48            ),
49          ],
50        ),
51      ],
52    ),
53  );
54}
55

Select Group

On this page