Tile

Tile Group

A tile group that typically groups related information together.

CLI

To generate a specific style for customization:

dart run forui style create tile-group

Usage

FTileGroup(...)

1FTileGroup(
2 style: const .delta(dividerWidth: 1),
3 enabled: true,
4 intrinsicWidth: null,
5 divider: .indented,
6 label: const Text('Label'),
7 description: const Text('Description'),
8 error: null,
9 children: [
10 .tile(title: const Text('Tile 1'), onPress: () {}),
11 .tile(title: const Text('Tile 2'), onPress: () {}),
12 ],
13)

FTileGroup.builder(...)

1FTileGroup.builder(
2 style: const .delta(dividerWidth: 1),
3 enabled: true,
4 divider: .indented,
5 label: const Text('Label'),
6 description: const Text('Description'),
7 error: null,
8 tileBuilder: (context, index) =>
9 FTile(title: Text('Tile $index'), onPress: () {}),
10 count: 10,
11)

FTileGroup.merge(...)

1FTileGroup.merge(
2 style: const .delta(dividerWidth: 1),
3 enabled: true,
4 intrinsicWidth: null,
5 divider: .full,
6 label: const Text('Label'),
7 description: const Text('Description'),
8 error: null,
9 children: [
10 .group(
11 children: [.tile(title: const Text('Group 1 Tile'), onPress: () {})],
12 ),
13 .group(
14 children: [.tile(title: const Text('Group 2 Tile'), onPress: () {})],
15 ),
16 ],
17)

Examples

Behavior

Scrollable

Lazy Scrollable

Merge Multiple Groups

This function merges multiple FTileGroupMixins into a single group. It is useful for representing a group with several sections.

Appearance

Full Divider

No Divider

On this page