flutter_preview_context_menu #

A flexible contextual menu for Flutter inspired by modern messaging apps. It is designed for chat bubbles, media previews, list rows, files, cards, or any widget that needs a long-press action menu.

Features #

• Long-press context menu for any widget.
• Optional custom preview, separate from the pressed child.
• Optional top content for reactions, chips, shortcuts, or any custom widget.
• Configurable action rows with icons, descriptions, trailing widgets, disabled states, separators, and destructive styling.
• Viewport-aware positioning so the preview and actions stay on screen when possible.
• Optional animated preview from the original source position.
• No app-specific dependencies.

Basic usage #

ContextMenuRegion(
  alignment: AlignmentDirectional.centerEnd,
  actions: [
    ContextMenuActionData(
      id: 'reply',
      label: 'Reply',
      icon: const Icon(Icons.reply),
      onPressed: () {
        // Run your own logic here.
      },
    ),
    ContextMenuActionData(
      id: 'delete',
      label: 'Delete',
      icon: const Icon(Icons.delete_outline),
      destructive: true,
      separatedBefore: true,
      onPressed: () {
        // Confirm or delete from the caller.
      },
    ),
  ],
  child: const Text('Long press me'),
)

Custom preview #

The preview defaults to child. Provide preview when the menu should show a different or more compact widget.

ContextMenuRegion(
  child: messageBubble,
  preview: ConstrainedBox(
    constraints: const BoxConstraints(maxWidth: 280),
    child: messageBubblePreview,
  ),
  actions: actions,
)

Reactions or top content #

topContent accepts any widget. This keeps reactions and shortcuts outside of the package’s business logic.

ContextMenuRegion(
  topContent: Container(
    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(24),
    ),
    child: const Text('👍 ❤️ 😂 😮 😢 🙏'),
  ),
  actions: actions,
  child: messageBubble,
)

Overflow behavior #

Use overflowStrategy when the menu may be opened near the screen edges or when the action list can be long.

ContextMenuRegion(
  overflowStrategy: ContextMenuOverflowStrategy.repositionThenScroll,
  maxPanelHeightFactor: 0.45,
  actions: actions,
  child: child,
)

Available strategies:

• repositionThenScroll: tries to reposition the menu and constrains the action panel if needed.
• scrollAll: lets the whole contextual content scroll together.

Animation #

The default preview animates from the original widget position. If you pass a custom preview, enable animatePreview when that transition is still desired.

ContextMenuRegion(
  preview: customPreview,
  animatePreview: true,
  actions: actions,
  child: child,
)

Notes #

The package only renders the interaction. It intentionally does not perform app actions such as replying, copying, reporting, deleting, or mutating data. Those side effects belong to the app through each action’s onPressed.