Select Tile Group
A group of tiles that allow users to make a selection from a set of options.
For desktop, a select group is generally recommended over this.
Preview
Usage
FSelectTileGroup(...)
FSelectTileGroup<Value>(
selectController: FSelectTileGroupController(), // or FSelectTileGroupController.radio()
scrollController: ScrollController(),
cacheExtent: 100,
maxHeight: 200,
dragStartBehavior: DragStartBehavior.start,
physics: const ClampingScrollPhysics(),
label: const Text('Sidebar'),
description: const Text('Select the items you want to display in the sidebar.'),
divider: FTileDivider.indented,
onChange: (all) => print(all),
onSelect: (selection) => print(selection),
children: [
FSelectTile(
title: const Text('1'),
value: Value.something,
),
],
);
FTileGroup.builder(...)
FSelectTileGroup<Value>.builder(
selectController: FSelectTileGroupController(), // or FSelectTileGroupController.radio()
scrollController: ScrollController(),
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,
onChange: (all) => print(all),
onSelect: (selection) => print(selection),
tileBuilder: (context, index) => index < 10 ? FSelectTile(
title: Text('Tile $index'),
value: Value.something,
) : null,
count: 100,
);
Examples
Behavior
Scrollable
Preview
Lazy Scrollable
Preview
Multi-value Form
Preview
Radio Form
Preview
Appearance
Custom Icons
Preview
Full Divider
Preview
No Divider
Preview
Last updated on