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.
Preview
CLI
To generate and customize this style:
dart run forui style create item-group
Usage
FItemGroup(...)
FItemGroup(
scrollController: ScrollController(),
style: FItemGroupStyle(...),
cacheExtent: 100,
maxHeight: 200,
dragStartBehavior: DragStartBehavior.start,
physics: const ClampingScrollPhysics(),
semanticsLabel: 'Settings',
divider: FItemDivider.indented,
children: [
FItem(title: const Text('Item'),
],
);
FItemGroup.builder(...)
FItemGroup.builder(
scrollController: ScrollController(),
style: FItemGroupStyle(...),
cacheExtent: 100,
maxHeight: 200,
dragStartBehavior: DragStartBehavior.start,
physics: const ClampingScrollPhysics(),
semanticsLabel: 'Settings',
divider: FItemDivider.indented,
itemBuilder: (context, index) => index < 10 ? FItem(title: Text('Item $index')) : null,
count: 100,
);
FItemGroup.merge(...)
FItemGroup.merge(
scrollController: ScrollController(),
cacheExtent: 100,
maxHeight: 200,
dragStartBehavior: DragStartBehavior.start,
physics: const ClampingScrollPhysics(),
semanticsLabel: 'Settings',
divider: FItemDivider.indented,
children: [
FItemGroup(
children: [],
)
],
);
Examples
Behavior
Scrollable
Preview
Lazy Scrollable
Preview
Merge Multiple Groups
This function merges multiple FItemGroupMixin
s into a single group. It is useful for representing a group with
several sections.
Preview
Appearance
Full Divider
Preview
Indented Divider
Preview
Last updated on