DocumentationTileSelect Menu Tile

Select Menu Tile

A tile that, when triggered, displays a list of options for the user to pick from.

For desktop, a select group is generally recommended over this.

Usage

FSelectMenuTile(...)

FSelectMenuTile<Value>(
  groupController: FMultiSelectGroupController(), // or FRadioSelectGroupController()
  popoverController: FPopoverController(...),
  scrollController: ScrollController(),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  divider: FTileDivider.indented,
  menuAnchor: FMenuAnchor.bottomLeft,
  tileAnchor: FTileAnchor.bottomLeft,
  shift: FPortalFollowerShift.flip,
  hideOnTapOutside: true,
  ignoreDirectionPadding: true,
  autoHide: false,
  label: const Text('Sidebar'),
  description: const Text('Select the items you want to display in the sidebar.'),
  errorBuilder: (context, error) => Text(error),
  prefixIcon: FIcon(FAssets.icons.bell),
  title: Text('Notifications'),
  subtitle: Text('subtitle'),
  details: Text('All'),
  suffixIcon: FIcon(FAssets.icons.chevronsUpDown),
  menu: [
    FSelectTile(
      label: const Text('1'),
      value: 1,
    ),
  ],
);

FSelectMenuTile.builder(...)

FSelectMenuTile<Value>.builder(
  groupController: FMultiSelectGroupController(), // or FRadioSelectGroupController()
  popoverController: FPopoverController(...),
  scrollController: ScrollController(),
  cacheExtent: 100,
  maxHeight: 200,
  dragStartBehavior: DragStartBehavior.start,
  divider: FTileDivider.indented,
  menuAnchor: FMenuAnchor.bottomLeft,
  tileAnchor: FTileAnchor.bottomLeft,
  shift: FPortalFollowerShift.flip,
  hideOnTapOutside: true,
  ignoreDirectionPadding: true,
  autoHide: false,
  label: const Text('Sidebar'),
  description: const Text('Select the items you want to display in the sidebar.'),
  errorBuilder: (context, error) => Text(error),
  prefixIcon: FIcon(FAssets.icons.bell),
  title: Text('Notifications'),
  subtitle: Text('subtitle'),
  details: Text('All'),
  suffixIcon: FIcon(FAssets.icons.chevronsUpDown),
  menuTileBuilder: (context, index) => FSelectTile(
    label: Text('Tile $index'),
    value: Value.something,
  ),
  predicate: (context, index) => index < 10,
  count: 100,
);

Examples

Auto Hide

Scrollable

Lazy Scrollable

Form