Item Group

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

FItemGroup(
  divider: FItemDivider.none,
  children: [
    FItem(
      prefix: const Icon(FIcons.user),
      title: const Text('Personalization'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
    FItem(
      prefix: const Icon(FIcons.wifi),
      title: const Text('WiFi'),
      details: const Text('Duobase (5G)'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
  ],
);

CLI

To generate and customize this style:

dart run forui style create item-group

Usage

`FItemGroup(...)`

FItemGroup(
  children: [
    FItem(title: const Text('Item')),
  ],
  style: (style) => style.copyWith(...),
  scrollController: ScrollController(),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  enabled: true,
  divider: FItemDivider.none,
  semanticsLabel: 'Settings',
);

`FItemGroup.builder(...)`

FItemGroup.builder(
  itemBuilder: (context, index) => index < 10 ? FItem(title: Text('Item $index')) : null,
  count: 100,
  style: (style) => style.copyWith(...),
  scrollController: ScrollController(),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  enabled: true,
  divider: FItemDivider.none,
  semanticsLabel: 'Settings',
);

`FItemGroup.merge(...)`

FItemGroup.merge(
  children: [
    FItemGroup(children: []),
  ],
  style: (style) => style.copyWith(...),
  scrollController: ScrollController(),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  enabled: true,
  divider: FItemDivider.full,
  semanticsLabel: 'Settings',
);

Examples

Behavior

Scrollable

FItemGroup(
  maxHeight: 150,
  children: [
    FItem(
      prefix: const Icon(FIcons.user),
      title: const Text('Personalization'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
    FItem(
      prefix: const Icon(FIcons.mail),
      title: const Text('Mail'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
    FItem(
      prefix: const Icon(FIcons.wifi),
      title: const Text('WiFi'),
      details: const Text('Duobase (5G)'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
    FItem(
      prefix: const Icon(FIcons.alarmClock),
      title: const Text('Alarm Clock'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
    FItem(
      prefix: const Icon(FIcons.qrCode),
      title: const Text('QR code'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
  ],
);

Lazy Scrollable

FItemGroup.builder(
  maxHeight: 200,
  count: 200,
  itemBuilder: (context, index) => FItem(
    title: Text('Item $index'),
    suffix: const Icon(FIcons.chevronRight),
    onPress: () {},
  ),
);

Merge Multiple Groups

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

FItemGroup.merge(
  children: [
    FItemGroup(
      children: [
        FItem(
          prefix: const Icon(FIcons.user),
          title: const Text('Personalization'),
          suffix: const Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FItem(
          prefix: const Icon(FIcons.wifi),
          title: const Text('WiFi'),
          details: const Text('Duobase (5G)'),
          suffix: const Icon(FIcons.chevronRight),
          onPress: () {},
        ),
      ],
    ),
    FItemGroup(
      children: [
        FItem(
          prefix: const Icon(FIcons.list),
          title: const Text('List View'),
          suffix: const Icon(FIcons.chevronRight),
          onPress: () {},
        ),
        FItem(
          prefix: const Icon(FIcons.grid2x2),
          title: const Text('Grid View'),
          suffix: const Icon(FIcons.chevronRight),
          onPress: () {},
        ),
      ],
    ),
  ],
);

Appearance

Full Divider

FItemGroup(
  divider: FItemDivider.full,
  children: [
    FItem(
      prefix: const Icon(FIcons.user),
      title: const Text('Personalization'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
    FItem(
      prefix: const Icon(FIcons.wifi),
      title: const Text('WiFi'),
      details: const Text('Duobase (5G)'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
  ],
);

Indented Divider

FItemGroup(
  divider: FItemDivider.indented,
  children: [
    FItem(
      prefix: const Icon(FIcons.user),
      title: const Text('Personalization'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
    FItem(
      prefix: const Icon(FIcons.wifi),
      title: const Text('WiFi'),
      details: const Text('Duobase (5G)'),
      suffix: const Icon(FIcons.chevronRight),
      onPress: () {},
    ),
  ],
);

On this page