Skip to Content
DocsRemixComponentsMenu

A dropdown menu component for displaying actions or options in an overlay.

Interactive preview

Resolving preview metadata...

When to use this

  • Action menus: Show a list of available actions for a selected item
  • Context menus: Provide contextual options based on user selection
  • Navigation: Create dropdown navigation menus
  • Settings: Display configuration options in a compact dropdown

Basic implementation

Basic implementation
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class MenuExample extends StatefulWidget {
  const MenuExample({super.key});
 
  @override
  State<MenuExample> createState() => _MenuExampleState();
}
 
class _MenuExampleState extends State<MenuExample> {
  final controller = MenuController();
 
  @override
  Widget build(BuildContext context) {
    return RemixMenu<String>(
      trigger: const RemixMenuTrigger(label: 'Open Menu'),
      items: [
        RemixMenuItem(
          value: 'History',
          leadingIcon: Icons.history,
          label: 'History',
          style: menuItemStyle,
        ),
        RemixMenuItem(
          value: 'Settings',
          leadingIcon: Icons.settings,
          label: 'Settings',
          style: menuItemStyle,
        ),
        const RemixMenuDivider(),
        RemixMenuItem(
          value: 'Logout',
          leadingIcon: Icons.logout,
          label: 'Logout',
          style: menuItemStyle.onHovered(
            .color(Colors.redAccent.withValues(alpha: 0.05))
                .label(.color(Colors.redAccent))
                .leadingIcon(.color(Colors.redAccent)),
          ),
        ),
      ],
      positioning: const OverlayPositionConfig(
        offset: .new(0, 8),
        followerAnchor: .topCenter,
        targetAnchor: .bottomCenter,
      ),
      style: menuStyle,
      onSelected: (value) {
        debugPrint('Selected: $value');
      },
      controller: controller,
    );
  }
 
  RemixMenuStyler get menuStyle {
    return RemixMenuStyler()
        .trigger(
          .padding(.symmetric(horizontal: 14))
              .decoration(
                BoxDecorationMix.color(Colors.white)
                    .borderRadius(.circular(12))
                    .border(.all(.color(Colors.blueGrey.shade100)))
                    .boxShadow([
                      .color(
                        Colors.blueGrey.withValues(alpha: 0.1),
                      ).blurRadius(3).offset(x: 0, y: 3),
                    ]),
              )
              .constraints(.minHeight(40))
              .label(.color(Colors.blueGrey.shade700).fontWeight(.w400)),
        )
        .overlay(
          .padding(.all(12)).decoration(
            BoxDecorationMix.color(Colors.white)
                .borderRadius(.circular(12))
                .border(.all(.color(Colors.blueGrey.shade100)))
                .boxShadow([
                  .color(
                    Colors.blueGrey.withValues(alpha: 0.1),
                  ).blurRadius(3).offset(x: 0, y: 3),
                ]),
          ),
        );
  }
 
  RemixMenuItemStyler get menuItemStyle {
    return RemixMenuItemStyler()
        .paddingAll(6)
        .leadingIcon(.size(20).color(Colors.blueGrey.shade800))
        .spacing(8)
        .borderRadius(.circular(8))
        .label(.color(Colors.blueGrey.shade800))
        .onHovered(.color(Colors.blueGrey.shade50));
  }
}

Fortal widgets

Remix includes a generated Fortal-themed widget for this component:

Fortal variants
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalMenuExample extends StatelessWidget {
  const FortalMenuExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    final items = <RemixMenuItemData<String>>[
      RemixMenuItem(value: 'edit', label: 'Edit', leadingIcon: Icons.edit),
      RemixMenuItem(
        value: 'delete',
        label: 'Delete',
        leadingIcon: Icons.delete,
      ),
    ];
    return Row(
      spacing: 16,
      children: [
        FortalMenu.solid(
          trigger: const RemixMenuTrigger(label: 'Solid', icon: Icons.menu),
          items: items,
          onSelected: (value) => debugPrint(value),
        ),
        FortalMenu.soft(
          trigger: const RemixMenuTrigger(label: 'Soft', icon: Icons.menu),
          items: items,
          onSelected: (value) => debugPrint(value),
        ),
      ],
    );
  }
}

See the fortalMenuStyler source code  for all available options.

Constructor

Constructor
const RemixMenu({
  Key? key,
  required RemixMenuTrigger trigger,
  required List<RemixMenuItemData<T>> items,
  MenuController? controller,
  ValueChanged<T>? onSelected,
  VoidCallback? onOpen,
  VoidCallback? onClose,
  VoidCallback? onCanceled,
  RawMenuAnchorOpenRequestedCallback? onOpenRequested,
  RawMenuAnchorCloseRequestedCallback? onCloseRequested,
  bool consumeOutsideTaps = true,
  bool useRootOverlay = false,
  bool closeOnClickOutside = true,
  FocusNode? triggerFocusNode,
  OverlayPositionConfig positioning = const OverlayPositionConfig(),
  RemixMenuStyler style = const RemixMenuStyler.create(),
  RemixMenuSpec? styleSpec,
})

Properties

Widget Properties

key → Key?

Optional. Controls how one widget replaces another widget in the tree.

trigger → RemixMenuTrigger

Required. The trigger data that defines the menu’s button.

items → List<RemixMenuItemData<T>>

Required. The list of menu items and dividers. Use [RemixMenuItem] for selectable items and [RemixMenuDivider] for separators.

controller → MenuController?

Optional. Optional controller for programmatic control of the menu state. If not provided, an internal controller will be created automatically.

onSelected → ValueChanged<T>?

Optional. Called when an item is selected.

onOpen → VoidCallback?

Optional. Called when the menu opens.

onClose → VoidCallback?

Optional. Called when the menu closes.

onCanceled → VoidCallback?

Optional. Called when the menu closes without a selection.

onOpenRequested → RawMenuAnchorOpenRequestedCallback?

Optional. Open/close interceptors (for example, to drive animations).

onCloseRequested → RawMenuAnchorCloseRequestedCallback?

Optional.

consumeOutsideTaps → bool

Optional. Whether outside taps on the trigger are consumed.

useRootOverlay → bool

Optional. Whether to target the root overlay instead of the nearest ancestor.

closeOnClickOutside → bool

Optional. Whether taps outside the overlay close the menu.

triggerFocusNode → FocusNode?

Optional. Optional focus node for the trigger.

positioning → OverlayPositionConfig

Optional. Overlay positioning configuration.

style → RemixMenuStyler

Optional. The style configuration for the menu.

styleSpec → RemixMenuSpec?

Optional. A raw resolved style spec that bypasses fluent style resolution.

trigger(RemixMenuTriggerStyler value)

Configures the trigger button style.

overlay(FlexBoxStyler value)

Configures the menu overlay container style.

item(RemixMenuItemStyler value)

Configures the default menu item style.

divider(RemixDividerStyler value)

Configures divider style.

animate(AnimationConfig value)

Configures implicit animation for style transitions.

variants(List<VariantStyle<RemixMenuSpec>> value)

Sets style variants.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

modifier(WidgetModifierConfig value)

Sets the widget modifier.

call<T>({ ... })

Creates a RemixMenu widget with this style applied.

container(FlexBoxStyler value)

Configures the trigger container style.

label(TextStyler value)

Configures the trigger label style.

icon(IconStyler value)

Configures the trigger icon style.

animate(AnimationConfig value)

Configures implicit animation for trigger style transitions.

variants(List<VariantStyle<RemixMenuTriggerSpec>> value)

Sets trigger style variants.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

modifier(WidgetModifierConfig value)

Sets the trigger widget modifier.

labelStyle(TextStyleMix value)

Sets label/text style using TextStyleMix directly

labelColor(Color value)

Sets label/text color

labelFontSize(double value)

Sets label/text font size

labelFontWeight(FontWeight value)

Sets label/text font weight

labelFontStyle(FontStyle value)

Sets label/text font style (italic/normal)

labelLetterSpacing(double value)

Sets label/text letter spacing

labelDecoration(TextDecoration value)

Sets label/text decoration (underline, strikethrough, etc.)

labelFontFamily(String value)

Sets label/text font family

labelHeight(double value)

Sets label/text line height

labelWordSpacing(double value)

Sets label/text word spacing

labelDecorationColor(Color value)

Sets label/text decoration color

iconColor(Color value)

Sets icon color

iconSize(double value)

Sets icon size

iconOpacity(double value)

Sets icon opacity

iconWeight(double value)

Sets icon weight (useful for variable icons like Material Symbols)

iconGrade(double value)

Sets icon grade (useful for Material Icons)

iconFill(double value)

Sets icon fill (useful for Material Icons filled variants)

iconOpticalSize(double value)

Sets icon optical size (useful for Material Icons)

iconBlendMode(BlendMode value)

Sets icon blend mode

iconTextDirection(TextDirection value)

Sets icon text direction

iconShadows(List<ShadowMix> value)

Sets icon shadows

iconShadow(ShadowMix value)

Sets single icon shadow

container(FlexBoxStyler value)

Configures the item container style.

label(TextStyler value)

Configures the label text style using a TextStyler.

leadingIcon(IconStyler value)

Configures the leading icon style.

trailingIcon(IconStyler value)

Configures the trailing icon style.

alignment(Alignment value)

Sets container alignment

padding(EdgeInsetsGeometryMix value)

Sets the container padding.

color(Color value)

Sets background color.

size(double width, double height)

Sets the component size.

borderRadius(BorderRadiusGeometryMix radius)

Sets the border radius.

constraints(BoxConstraintsMix value)

Sets size constraints on the component.

decoration(DecorationMix value)

Sets the container decoration.

margin(EdgeInsetsGeometryMix value)

Sets the container margin.

foregroundDecoration(DecorationMix value)

Sets a foreground decoration painted on top of the component.

transform(Matrix4 value, {Alignment alignment = .center})

Applies a matrix transformation to the component.

flex(FlexStyler value)

Configures the flex layout properties.

animate(AnimationConfig value)

Configures implicit animation for style transitions.

variants(List<VariantStyle<RemixMenuItemSpec>> value)

Sets item style variants.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

modifier(WidgetModifierConfig value)

Sets the item widget modifier.

Last updated on
IconButtonPopover