Item Group

This widget is typically used to create more complex widgets rather than being used directly.

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

CLI

To generate and customize this style:

dart run forui style create item-group

Usage

`FItemGroup(...)`

1FItemGroup(
2  style: const .delta(spacing: 4),
3  enabled: true,
4  divider: .none,
5  children: [
6    .item(title: const Text('Item 1'), onPress: () {}),
7    .item(title: const Text('Item 2'), onPress: () {}),
8  ],
9)

`FItemGroup.builder(...)`

1FItemGroup.builder(
2  style: const .delta(spacing: 4),
3  enabled: true,
4  divider: .none,
5  itemBuilder: (context, index) =>
6      FItem(title: Text('Item $index'), onPress: () {}),
7  count: 10,
8)

`FItemGroup.merge(...)`

1FItemGroup.merge(
2  style: const .delta(spacing: 4),
3  enabled: true,
4  divider: .full,
5  children: [
6    .group(
7      children: [.item(title: const Text('Group 1 Item'), onPress: () {})],
8    ),
9    .group(
10      children: [.item(title: const Text('Group 2 Item'), onPress: () {})],
11    ),
12  ],
13)

Examples

Behavior

Scrollable

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

Lazy Scrollable

1@override
2Widget build(BuildContext _) => FItemGroup.builder(
3  maxHeight: 200,
4  count: 200,
5  itemBuilder: (context, index) => FItem(
6    title: Text('Item $index'),
7    suffix: const Icon(FIcons.chevronRight),
8    onPress: () {},
9  ),
10);
11

Merge Multiple Groups

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

1@override
2Widget build(BuildContext _) => FItemGroup.merge(
3  children: [
4    .group(
5      children: [
6        .item(
7          prefix: const Icon(FIcons.user),
8          title: const Text('Personalization'),
9          suffix: const Icon(FIcons.chevronRight),
10          onPress: () {},
11        ),
12        .item(
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    .group(
22      children: [
23        .item(
24          prefix: const Icon(FIcons.list),
25          title: const Text('List View'),
26          suffix: const Icon(FIcons.chevronRight),
27          onPress: () {},
28        ),
29        .item(
30          prefix: const Icon(FIcons.grid2x2),
31          title: const Text('Grid View'),
32          suffix: const Icon(FIcons.chevronRight),
33          onPress: () {},
34        ),
35      ],
36    ),
37  ],
38);
39

Appearance

Full Divider

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

Indented Divider

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

On this page