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(...),
  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,
    ),
  ],
);

Examples

Auto Hide

Form

enum Notification { all, direct, nothing }
 
class _SelectMenuTileForm extends StatefulWidget {
  const _SelectMenuTileForm({super.key});
 
  @override
  State<_SelectMenuTileForm> createState() => _SelectMenuTileFormState();
}
 
class _SelectMenuTileFormState extends State<_SelectMenuTileForm> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final FRadioSelectGroupController<Notification> controller = FRadioSelectGroupController();
 
  @override
  Widget build(BuildContext context) => Form(
        key: _formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            FSelectMenuTile(
              groupController: controller,
              autoHide: true,
              validator: (value) => value == null ? 'Select an item' : null,
              prefixIcon: FIcon(FAssets.icons.bell),
              title: const Text('Notifications'),
              details: ListenableBuilder(
                listenable: controller,
                builder: (context, _) => Text(
                  switch (controller.values.firstOrNull) {
                    Notification.all => 'All',
                    Notification.direct => 'Direct Messages',
                    null || Notification.nothing => 'None',
                  },
                ),
              ),
              menu: [
                FSelectTile(title: const Text('All'), value: Notification.all),
                FSelectTile(title: const Text('Direct Messages'), value: Notification.direct),
                FSelectTile(title: const Text('None'), value: Notification.nothing),
              ],
            ),
            const SizedBox(height: 20),
            FButton(
              label: const Text('Save'),
              onPress: () {
                if (!_formKey.currentState!.validate()) {
                  // Handle errors here.
                  return;
                }
 
                _formKey.currentState!.save();
                // Do something.
              },
            ),
          ],
        ),
      );
 
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

Select Tile Group Bottom Navigation Bar