Data Presentation

Item Group

An item group that typically groups related information together.

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

CLI

To generate a specific style for customization:

dart run forui style create item-group

Usage

FItemGroup(...)

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

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 intrinsicWidth: null,
5 divider: .full,
6 children: [
7 .group(
8 children: [.item(title: const Text('Group 1 Item'), onPress: () {})],
9 ),
10 .group(
11 children: [.item(title: const Text('Group 2 Item'), onPress: () {})],
12 ),
13 ],
14)

Examples

Behavior

Scrollable

Lazy Scrollable

Merge Multiple Groups

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

Appearance

Full Divider

Indented Divider

On this page