Tile

Select Menu Tile

A tile that, when triggered, displays a list of options for the user to pick from.

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

CLI

To generate a specific style for customization:

dart run forui style create select-menu-tile

Usage

FSelectMenuTile(...)

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

Examples

No Auto Hide

Scrollable

Lazy Scrollable

Form

On this page