s_context_menu #

A professional highly-featured Flutter context menu widget built from scratch, offering advanced customization, accessibility, and smooth animations.

Demo #

Features #

• ✨ Animated Transitions: Smooth fade and scale animations for menu appearance and disappearance
• 🎯 Smart Positioning: Automatically positions the menu and arrow based on available space
• 📱 Multi-Platform: Works on desktop (right-click) and mobile (long-press) devices
• ♿ Accessibility: Built-in semantic labels and screen reader announcements
• 🎨 Customizable Theme: Comprehensive theming system for colors, blur, radii, shadows, and more
• ⌨️ Keyboard Navigation: Full keyboard support with arrow keys and ESC key to close
• 📜 Overflow Handling: Automatically scrolls menu content when it exceeds available space
• 🔄 Multi-Open Mode: Display multiple context menus simultaneously when enabled
• 🎮 Lifecycle Callbacks: onOpened and onClosed callbacks for menu state tracking
• 🛠️ Programmatic Control: Static methods for closing menus and checking menu state
• 💎 Modern Design: Glassmorphic effect with backdrop blur for a premium look

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  s_context_menu: ^1.0.0

Then import the package:

import 'package:s_context_menu/s_context_menu.dart';

Basic Usage #

Wrap any widget with SContextMenu and provide a list of context menu items:

SContextMenu(
  buttons: [
    SContextMenuItem(
      label: 'Edit',
      icon: Icons.edit,
      onPressed: () {
        print('Edit pressed');
      },
    ),
    SContextMenuItem(
      label: 'Delete',
      icon: Icons.delete,
      destructive: true,
      onPressed: () {
        print('Delete pressed');
      },
    ),
  ],
  child: Container(
    color: Colors.blue,
    height: 100,
    width: 100,
    child: Center(child: Text('Right-click or long-press me')),
  ),
)

Advanced Usage #

Theming #

Customize the appearance of your context menu:

SContextMenu(
  theme: const SContextMenuTheme(
    panelBorderRadius: 12,
    panelBlurSigma: 30,
    arrowBaseWidth: 12,
    arrowShape: ArrowShape.curved,
    showDuration: Duration(milliseconds: 250),
    hideDuration: Duration(milliseconds: 200),
  ),
  buttons: [
    SContextMenuItem(label: 'Option 1', icon: Icons.edit, onPressed: () {}),
  ],
  child: YourWidget(),
)

Multiple Open Menus #

Enable multiple context menus to be open simultaneously:

Column(
  children: [
    SContextMenu(
      allowMultipleMenus: true,
      buttons: [...],
      child: Container(...),
    ),
    SContextMenu(
      allowMultipleMenus: true,
      buttons: [...],
      child: Container(...),
    ),
  ],
)

// Later, close all menus programmatically:
SContextMenu.closeAllOpenMenus();

Lifecycle Callbacks #

Respond to menu state changes:

SContextMenu(
  buttons: [...],
  onOpened: () {
    print('Menu opened');
  },
  onClosed: () {
    print('Menu closed');
  },
  onButtonPressed: (label) {
    print('Button pressed: $label');
  },
  child: YourWidget(),
)

Programmatic Control #

Check and control menu state:

// Check if a menu is open
if (SContextMenu.hasOpenMenu) {
  print('A menu is currently open');
}

// Close the currently active menu
SContextMenu.closeOpenMenu();

// Check if any menus are open (works in multi-open mode)
if (SContextMenu.hasAnyOpenMenus) {
  print('At least one menu is open');
}

// Close all open menus
SContextMenu.closeAllOpenMenus();

Destructive Actions #

Mark dangerous actions with the destructive: true parameter for special styling:

SContextMenuItem(
  label: 'Delete Forever',
  icon: Icons.delete_forever,
  destructive: true,
  onPressed: () {
    // Handle deletion
  },
)

Keep Menu Open #

Use keepMenuOpen: true to prevent the menu from closing after a button press. Useful for multi-selection or toggle actions:

SContextMenuItem(
  label: 'Toggle Selection',
  icon: Icons.check_box,
  keepMenuOpen: true, // Menu stays open after press
  onPressed: () {
    // Toggle selection state
  },
)

Custom Semantics #

Provide custom semantic labels for better accessibility:

SContextMenuItem(
  label: 'Share',
  icon: Icons.share,
  semanticsLabel: 'Share this item with others',
  onPressed: () {
    // Handle share
  },
)

Keyboard Navigation #

When the context menu is open, you can:

• Arrow Up/Down: Navigate through menu items
• Enter/Space: Activate the currently highlighted item
• ESC: Close the menu

API Reference #

SContextMenu #

SContextMenuItem #

SContextMenuTheme #

Customize appearance with these properties:

Example #

A complete example is available in the example/ directory. To run it:

cd example
flutter run

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing #

Contributions are welcome! Feel free to submit issues and pull requests to help improve this package.

Support #

If you have any questions or issues, please open an issue on GitHub.