Skip to Content
Forui 0.13.0 is released 🎉
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.

CLI

To generate and customize this style:

dart run forui style create select-menu-tile

Usage

FSelectMenuTile(...)

FSelectMenuTile<Value>( selectController: FSelectMenuTileController(), // or FSelectMenuTileController.radio() style: FSelectMenuTileStyle(...), menuAnchor: Alignment.topRight, tileAnchor: Alignment.bottomRight, spacing: const FPortalSpacing(4), shift: FPortalShift.flip, offset: Offset.zero, hideOnTapOutside: FHidePopoverRegion.anywhere, autoHide: false, scrollController: ScrollController(), cacheExtent: 100, maxHeight: 200, dragStartBehavior: DragStartBehavior.start, physics: const ClampingScrollPhysics(), divider: FItemDivider.indented, label: const Text('Sidebar'), description: const Text('Select the items you want to display in the sidebar.'), errorBuilder: (context, error) => Text(error), prefix: Icon(FIcons.bell), title: Text('Notifications'), subtitle: Text('subtitle'), detailsBuilder: (context, values, child) => Placeholder()m details: Text('All'), suffix: Icon(FIcons.chevronsUpDown), onChange: (all) => print(all), onSelect: (selection) => print(selection), shortcuts: { SingleActivator(LogicalKeyboardKey.enter): ActivateIntent() }, actions: { ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: (_) {}) }, initialValue: Value.something, menu: [ FSelectTile( title: const Text('1'), value: Value.something, ), ], );

FSelectMenuTile.builder(...)

FSelectMenuTile<Value>.builder( selectController: FSelectMenuTileController(), // or FSelectMenuTileController.radio() style: FSelectMenuTileStyle(...), menuAnchor: Alignment.topRight, tileAnchor: Alignment.bottomRight, spacing: const FPortalSpacing(4), shift: FPortalShift.flip, offset: Offset.zero, hideOnTapOutside: FHidePopoverRegion.anywhere, autoHide: false, scrollController: ScrollController(), cacheExtent: 100, maxHeight: 200, dragStartBehavior: DragStartBehavior.start, physics: const ClampingScrollPhysics(), divider: FItemDivider.indented, label: const Text('Sidebar'), description: const Text('Select the items you want to display in the sidebar.'), errorBuilder: (context, error) => Text(error), prefix: Icon(FIcons.bell), title: Text('Notifications'), subtitle: Text('subtitle'), detailsBuilder: (context, values, child) => Placeholder()m details: Text('All'), suffix: Icon(FIcons.chevronsUpDown), menuBuilder: (context, index) => index < 10 ? FSelectTile( title: Text('Tile $index'), value: Value.something, ) : null, initialValue: Value.something, count: 100, onChange: (all) => print(all), onSelect: (selection) => print(selection), shortcuts: { SingleActivator(LogicalKeyboardKey.enter): ActivateIntent() }, actions: { ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: (_) {}) }, );

Examples

No Auto Hide

Scrollable

Lazy Scrollable

Form

Last updated on