Tile

Select Tile Group

A group of tiles that allow users to make a selection from a set of options.

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

CLI

To generate a specific style for customization:

dart run forui style create tile-group

Usage

FSelectTileGroup(...)

1FSelectTileGroup<String>(
2 style: const .delta(dividerWidth: 1),
3 enabled: true,
4 intrinsicWidth: null,
5 divider: .indented,
6 children: const [
7 .tile(title: Text('Apple'), value: 'apple'),
8 .tile(title: Text('Banana'), value: 'banana'),
9 .tile(title: Text('Cherry'), value: 'cherry'),
10 ],
11)

FSelectTileGroup.builder(...)

1FSelectTileGroup<String>.builder(
2 style: const .delta(dividerWidth: 1),
3 enabled: true,
4 divider: .indented,
5 tileBuilder: (context, index) =>
6 FSelectTile(title: Text('Item $index'), value: 'item_$index'),
7 count: 10,
8)

FSelectTile(...)

1FSelectTile<String>(
2 style: const .delta(padding: .value(.zero)),
3 enabled: true,
4 value: 'apple',
5 title: const Text('Apple'),
6 subtitle: const Text('A red fruit'),
7 details: const Text(r'$1.99'),
8 checkedIcon: const Icon(FLucideIcons.check),
9 uncheckedIcon: null,
10 suffix: null,
11)

FSelectTile.suffix(...)

1FSelectTile<String>.suffix(
2 style: const .delta(padding: .value(.zero)),
3 enabled: true,
4 value: 'apple',
5 title: const Text('Apple'),
6 subtitle: const Text('A red fruit'),
7 details: const Text(r'$1.99'),
8 checkedIcon: const Icon(FLucideIcons.check),
9 uncheckedIcon: null,
10 prefix: null,
11)

Examples

Behavior

Scrollable

Lazy Scrollable

Multi-value Form

Radio Form

Appearance

Custom Icons

Full Divider

No Divider

On this page