Select Menu Tile

For desktop, a select group is generally recommended over this.

1enum Notification {
2  all,
3  direct,
4  nothing,
5  limitedTime,
6  timeSensitive,
7  selectedApps,
8}
9
10class SelectMenuTileExample extends StatelessWidget {
11  @override
12  Widget build(BuildContext _) => FSelectMenuTile<Notification>.fromMap(
13    const {'All': .all, 'Direct Messages': .direct, 'None': .nothing},
14    selectControl: const .managed(initial: {.all}),
15    validator: (value) => value == null ? 'Select an item' : null,
16    prefix: const Icon(FIcons.bell),
17    title: const Text('Notifications'),
18    detailsBuilder: (_, values, _) => Text(switch (values.firstOrNull) {
19      .all => 'All',
20      .direct => 'Direct Messages',
21      _ => 'None',
22    }),
23  );
24}
25

CLI

To generate and customize this style:

dart run forui style create select-menu-tile

Usage

`FSelectMenuTile(...)`

1FSelectMenuTile<String>(
2  style: const .delta(labelPadding: .symmetric(vertical: 7)),
3  enabled: true,
4  autoHide: true,
5  divider: .full,
6  title: const Text('Select Option'),
7  prefix: const Icon(FIcons.list),
8  subtitle: const Text('Choose one'),
9  detailsBuilder: (context, values, child) => Text(values.join(', ')),
10  details: null,
11  suffix: const Icon(FIcons.chevronsUpDown),
12  menu: const [
13    .tile(title: Text('Option 1'), value: 'option1'),
14    .tile(title: Text('Option 2'), value: 'option2'),
15  ],
16)

`FSelectMenuTile.builder(...)`

1FSelectMenuTile<String>.builder(
2  style: const .delta(labelPadding: .symmetric(vertical: 7)),
3  enabled: true,
4  autoHide: true,
5  divider: .full,
6  title: const Text('Select Option'),
7  prefix: const Icon(FIcons.list),
8  subtitle: const Text('Choose one'),
9  detailsBuilder: (context, values, child) => Text(values.join(', ')),
10  details: null,
11  suffix: const Icon(FIcons.chevronsUpDown),
12  menuBuilder: (context, index) =>
13      FSelectTile(title: Text('Option $index'), value: 'option$index'),
14  count: 10,
15)

Examples

No Auto Hide

1enum Notification {
2  all,
3  direct,
4  nothing,
5  limitedTime,
6  timeSensitive,
7  selectedApps,
8}
9
10class NoAutoHideSelectMenuTileExample extends StatelessWidget {
11  @override
12  Widget build(BuildContext _) => FSelectMenuTile<Notification>.fromMap(
13    const {'All': .all, 'Direct Messages': .direct, 'None': .nothing},
14    selectControl: const .managed(initial: {.all}),
15    autoHide: false,
16    validator: (value) => value == null ? 'Select an item' : null,
17    prefix: const Icon(FIcons.bell),
18    title: const Text('Notifications'),
19    detailsBuilder: (_, values, _) => Text(switch (values.firstOrNull) {
20      .all => 'All',
21      .direct => 'Direct Messages',
22      _ => 'None',
23    }),
24  );
25}
26

Scrollable

1enum Notification {
2  all,
3  direct,
4  nothing,
5  limitedTime,
6  timeSensitive,
7  selectedApps,
8}
9
10class ScrollableSelectMenuTileExample extends StatelessWidget {
11  @override
12  Widget build(BuildContext _) => FSelectMenuTile<Notification>(
13    selectControl: const .managed(initial: {.all}),
14    maxHeight: 150,
15    validator: (value) => value == null ? 'Select an item' : null,
16    prefix: const Icon(FIcons.bell),
17    title: const Text('Notifications'),
18    detailsBuilder: (_, values, _) => Text(switch (values.firstOrNull) {
19      .all => 'All',
20      .direct => 'Direct Messages',
21      .limitedTime => 'Limited Time',
22      .selectedApps => 'Selected Apps',
23      .timeSensitive => 'Time Sensitive',
24      null || .nothing => 'None',
25    }),
26    menu: const [
27      .tile(title: Text('All'), value: .all),
28      .tile(title: Text('Direct Messages'), value: .direct),
29      .tile(title: Text('Limited Time'), value: .limitedTime),
30      .tile(title: Text('Selected Apps'), value: .selectedApps),
31      .tile(title: Text('Time Sensitive'), value: .timeSensitive),
32      .tile(title: Text('None'), value: .nothing),
33    ],
34  );
35}
36

Lazy Scrollable

1@override
2Widget build(BuildContext _) => FSelectMenuTile.builder(
3  selectControl: const .managed(initial: {1}),
4  prefix: const Icon(FIcons.variable),
5  title: const Text('Applicable values'),
6  maxHeight: 200,
7  menuBuilder: (context, index) =>
8      .tile(title: Text('Tile $index'), value: index),
9);
10

Form

1enum Notification {
2  all,
3  direct,
4  nothing,
5  limitedTime,
6  timeSensitive,
7  selectedApps,
8}
9
10class SelectMenuTileFormExample extends StatefulWidget {
11  @override
12  State<SelectMenuTileFormExample> createState() =>
13      _SelectMenuTileFormExampleState();
14}
15
16class _SelectMenuTileFormExampleState extends State<SelectMenuTileFormExample> {
17  final _key = GlobalKey<FormState>();
18
19  @override
20  Widget build(BuildContext context) => Form(
21    key: _key,
22    child: Column(
23      mainAxisSize: .min,
24      spacing: 20,
25      children: [
26        FSelectMenuTile<Notification>(
27          selectControl: const .managed(initial: {.all}),
28          validator: (value) => value == null ? 'Select an item' : null,
29          prefix: const Icon(FIcons.bell),
30          title: const Text('Notifications'),
31          detailsBuilder: (_, values, _) => Text(switch (values.firstOrNull) {
32            .all => 'All',
33            .direct => 'Direct Messages',
34            _ => 'None',
35          }),
36          menu: const [
37            .tile(title: Text('All'), value: .all),
38            .tile(title: Text('Direct Messages'), value: .direct),
39            .tile(title: Text('None'), value: .nothing),
40          ],
41        ),
42        FButton(
43          child: const Text('Save'),
44          onPress: () {
45            if (!_key.currentState!.validate()) {
46              // Handle errors here.
47              return;
48            }
49
50            _key.currentState!.save();
51            // Do something.
52          },
53        ),
54      ],
55    ),
56  );
57}
58

Select Menu Tile

On this page