Building an iOS-Styled Context Menu in Flutter Using CupertinoContextMenu

If you’re developing a Flutter app and want to implement a context menu with a smooth, native iOS-style experience, the CupertinoContextMenu widget is a perfect solution. In this tutorial, we’ll explore how to create a simple app that uses CupertinoContextMenu to present options like Copy, Share, Favorite, and Delete.

What is CupertinoContextMenu in Flutter?

The CupertinoContextMenu widget in Flutter provides an interactive menu when long-pressing on a UI element, mimicking the native context menu behavior in iOS. It’s highly customizable and enhances user interaction by offering contextual actions.

Full Code Example

Here’s the complete code for a sample Flutter app that demonstrates how to use CupertinoContextMenu:

import 'package:flutter/cupertino.dart';

/// Flutter code sample for [CupertinoContextMenu].

void main() => runApp(const ContextMenuApp());

class ContextMenuApp extends StatelessWidget {
  const ContextMenuApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: ContextMenuExample(),
    );
  }
}

class ContextMenuExample extends StatelessWidget {
  const ContextMenuExample({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoContextMenu Sample'),
      ),
      child: Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: CupertinoContextMenu(
            actions: <Widget>[
              CupertinoContextMenuAction(
                onPressed: () {
                  Navigator.pop(context);
                },
                isDefaultAction: true,
                trailingIcon: CupertinoIcons.doc_on_clipboard_fill,
                child: const Text('Copy'),
              ),
              CupertinoContextMenuAction(
                onPressed: () {
                  Navigator.pop(context);
                },
                trailingIcon: CupertinoIcons.share,
                child: const Text('Share'),
              ),
              CupertinoContextMenuAction(
                onPressed: () {
                  Navigator.pop(context);
                },
                trailingIcon: CupertinoIcons.heart,
                child: const Text('Favorite'),
              ),
              CupertinoContextMenuAction(
                onPressed: () {
                  Navigator.pop(context);
                },
                isDestructiveAction: true,
                trailingIcon: CupertinoIcons.delete,
                child: const Text('Delete'),
              ),
            ],
            child: const ColoredBox(
              color: CupertinoColors.systemYellow,
              child: FlutterLogo(size: 500.0),
            ),
          ),
        ),
      ),
    );
  }
}

How It Works

1. Main Function:
   The main function initializes the app by calling runApp with an instance of ContextMenuApp.
2. ContextMenuApp Widget:
   This stateless widget builds the main application using CupertinoApp with a light theme and sets ContextMenuExample as the home screen.
3. CupertinoContextMenu:
   The CupertinoContextMenu widget wraps a FlutterLogo and provides several context menu actions when long-pressed:
   • Copy: A default action with a clipboard icon.
   • Share: An action with a share icon.
   • Favorite: An action with a heart icon.
   • Delete: A destructive action with a delete icon.
   Each action pops the context menu upon selection using Navigator.pop(context).

Key Features of CupertinoContextMenu

• Interactive UI: Long-pressing on the child widget triggers a context menu with a smooth transition animation.
• Action Buttons: Easily define multiple context-specific actions using CupertinoContextMenuAction.
• Customizable Actions: Actions can be marked as default or destructive, and each can have a trailing icon for better UX.
• Native iOS Feel: The widget provides an iOS-native look and feel, improving the user experience on iOS devices.

Benefits of Using CupertinoContextMenu in Your Flutter App

1. Native iOS Look: Ideal for apps targeting iOS users, offering an interface consistent with iOS design guidelines.
2. Customizable: You can add or remove actions, change icons, and style them to suit your app’s requirements.
3. Enhanced UX: By using familiar UI patterns, users will find your app intuitive and easier to navigate.

SEO Keywords for Better Visibility

• Flutter CupertinoContextMenu Example
• How to Create a Context Menu in Flutter
• Flutter iOS-style Context Menu
• Using CupertinoContextMenuAction in Flutter
• Flutter Cupertino Widgets for iOS Design

Conclusion

In this tutorial, we explored how to use CupertinoContextMenu in Flutter to create an interactive context menu with multiple actions. This approach is ideal for apps targeting iOS users, ensuring a smooth and native experience. Try integrating CupertinoContextMenu into your next Flutter project to improve user interaction!

If you found this post helpful, share it with fellow developers, and don’t forget to subscribe for more Flutter tutorials!