Skip to Content
Forui 0.12.0 is released 🎉
DocumentationTileTile Group

Tile Group

A tile group that typically groups related information together.

API Reference

CLI

To generate and customize this style:

dart run forui style create tile-group

Usage

FTileGroup(...)

FTileGroup(
  scrollController: ScrollController(),
  style: FTileGroupStyle(...),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  label: const Text('Settings'),
  description: const Text('Personalize your experience'),
  semanticsLabel: 'Settings',
  divider: FTileDivider.indented,
  children: [],
);

FTileGroup.builder(...)

FTileGroup.builder(
  scrollController: ScrollController(),
  style: FTileGroupStyle(...),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  label: const Text('Settings'),
  description: const Text('Personalize your experience'),
  semanticsLabel: 'Settings',
  divider: FTileDivider.indented,
  tileBuilder: (context, index) => index < 10 ? FTile(title: Text('Tile $index')) : null,
  count: 100,
);

FTileGroup.merge(...)

FTileGroup.merge(
  scrollController: ScrollController(),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  physics: const ClampingScrollPhysics(),
  label: const Text('Settings'),
  semanticsLabel: 'Settings',
  divider: FTileDivider.indented,
  children: [],
);

Examples

Behavior

Scrollable

Lazy Scrollable

Merge Multiple Groups

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

⚠️

Deeply nesting FTileGroupMixins is not supported.

Appearance

Full Divider

No Divider

Last updated on
TileSelect Tile Group