Tile Group

1@override
2Widget build(BuildContext _) => FTileGroup(
3  label: const Text('Settings'),
4  description: const Text('Personalize your experience'),
5  children: [
6    .tile(
7      prefix: const Icon(FIcons.user),
8      title: const Text('Personalization'),
9      suffix: const Icon(FIcons.chevronRight),
10      onPress: () {},
11    ),
12    .tile(
13      prefix: const Icon(FIcons.wifi),
14      title: const Text('WiFi'),
15      details: const Text('Duobase (5G)'),
16      suffix: const Icon(FIcons.chevronRight),
17      onPress: () {},
18    ),
19  ],
20);
21

CLI

To generate and customize this style:

dart run forui style create tile-group

Usage

`FTileGroup(...)`

1FTileGroup(
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  children: [
9    .tile(title: const Text('Tile 1'), onPress: () {}),
10    .tile(title: const Text('Tile 2'), onPress: () {}),
11  ],
12)

`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  divider: .full,
5  label: const Text('Label'),
6  description: const Text('Description'),
7  error: null,
8  children: [
9    .group(
10      children: [.tile(title: const Text('Group 1 Tile'), onPress: () {})],
11    ),
12    .group(
13      children: [.tile(title: const Text('Group 2 Tile'), onPress: () {})],
14    ),
15  ],
16)

Examples

Behavior

Scrollable

1@override
2Widget build(BuildContext _) => FTileGroup(
3  label: const Text('Settings'),
4  description: const Text('Personalize your experience'),
5  maxHeight: 200,
6  children: [
7    .tile(
8      prefix: const Icon(FIcons.user),
9      title: const Text('Personalization'),
10      suffix: const Icon(FIcons.chevronRight),
11      onPress: () {},
12    ),
13    .tile(
14      prefix: const Icon(FIcons.mail),
15      title: const Text('Mail'),
16      suffix: const Icon(FIcons.chevronRight),
17      onPress: () {},
18    ),
19    .tile(
20      prefix: const Icon(FIcons.wifi),
21      title: const Text('WiFi'),
22      details: const Text('Duobase (5G)'),
23      suffix: const Icon(FIcons.chevronRight),
24      onPress: () {},
25    ),
26    .tile(
27      prefix: const Icon(FIcons.alarmClock),
28      title: const Text('Alarm Clock'),
29      suffix: const Icon(FIcons.chevronRight),
30      onPress: () {},
31    ),
32    .tile(
33      prefix: const Icon(FIcons.qrCode),
34      title: const Text('QR code'),
35      suffix: const Icon(FIcons.chevronRight),
36      onPress: () {},
37    ),
38  ],
39);
40

Lazy Scrollable

1@override
2Widget build(BuildContext _) => FTileGroup.builder(
3  label: const Text('Settings'),
4  description: const Text('Personalize your experience'),
5  maxHeight: 200,
6  count: 200,
7  tileBuilder: (context, index) => FTile(
8    title: Text('Tile $index'),
9    suffix: const Icon(FIcons.chevronRight),
10    onPress: () {},
11  ),
12);
13

Merge Multiple Groups

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

1class MergeTileGroupExample extends StatefulWidget {
2  @override
3  State<MergeTileGroupExample> createState() => _MergeTileGroupExampleState();
4}
5
6class _MergeTileGroupExampleState extends State<MergeTileGroupExample> {
7  @override
8  Widget build(BuildContext context) => FTileGroup.merge(
9    label: const Text('Settings'),
10    children: [
11      .group(
12        children: [
13          .tile(
14            prefix: const Icon(FIcons.user),
15            title: const Text('Personalization'),
16            suffix: const Icon(FIcons.chevronRight),
17            onPress: () {},
18          ),
19          .tile(
20            prefix: const Icon(FIcons.wifi),
21            title: const Text('WiFi'),
22            details: const Text('Duobase (5G)'),
23            suffix: const Icon(FIcons.chevronRight),
24            onPress: () {},
25          ),
26        ],
27      ),
28      .selectGroup(
29        control: const .managedRadio(initial: 'List'),
30        children: const [
31          FSelectTile(title: Text('List View'), value: 'List'),
32          FSelectTile(title: Text('Grid View'), value: 'Grid'),
33        ],
34      ),
35    ],
36  );
37}
38

Appearance

Full Divider

1@override
2Widget build(BuildContext _) => FTileGroup(
3  label: const Text('Settings'),
4  description: const Text('Personalize your experience'),
5  divider: .full,
6  children: [
7    .tile(
8      prefix: const Icon(FIcons.user),
9      title: const Text('Personalization'),
10      suffix: const Icon(FIcons.chevronRight),
11      onPress: () {},
12    ),
13    .tile(
14      prefix: const Icon(FIcons.wifi),
15      title: const Text('WiFi'),
16      details: const Text('Duobase (5G)'),
17      suffix: const Icon(FIcons.chevronRight),
18      onPress: () {},
19    ),
20  ],
21);
22

No Divider

1@override
2Widget build(BuildContext _) => FTileGroup(
3  label: const Text('Settings'),
4  description: const Text('Personalize your experience'),
5  divider: .none,
6  children: [
7    .tile(
8      prefix: const Icon(FIcons.user),
9      title: const Text('Personalization'),
10      suffix: const Icon(FIcons.chevronRight),
11      onPress: () {},
12    ),
13    .tile(
14      prefix: const Icon(FIcons.wifi),
15      title: const Text('WiFi'),
16      details: const Text('Duobase (5G)'),
17      suffix: const Icon(FIcons.chevronRight),
18      onPress: () {},
19    ),
20  ],
21);
22

On this page