contextmenu_plus

Pub Version

Fork with contextmenu with some improvements, thanks to the original project.

Display a beautiful material context menu using pure Flutter. It works both on touch devices and on desktop devices.

Screenshots

Demo Screen Recording

Features

  • modern, emphasizing animation according to material design guidelines
  • handles screen edges and oversize
  • very efficient code (< 250 lines)

Getting Started

You can easily display a context menu using the following code:

Widget build() {
  return ContextMenuArea(
    items: [
      ListTile(
        title: Text('Option 1'),
        onTap: () {
          Navigator.of(context).pop();
          ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text('Whatever')));
        },
      )
    ],
    child: Card(
      color: Theme
          .of(context)
          .primaryColor,
      child: Center(
        child: Text('Press somewhere for context menu.'),
      ),
    ),
  );
}

A more complicated way manually triggering a context menu using showContextMenu() is:

Widget build() {
  return GestureDetector(
      onSecondaryTapDown: (details) =>
          showContextMenu(
              details.globalPosition, context, items, verticalPadding, width),
      child: Text('Tap!'));
}

Setup web

For the web, you need disable the context menu of the browser, for example:

@override
  void initState() {
    super.initState();
    // On web, disable the browser's context menu since this example uses a custom
    // Flutter-rendered context menu.
    if (kIsWeb) {
      BrowserContextMenu.disableContextMenu();
    }
  }

  @override
  void dispose() {
    if (kIsWeb) {
      BrowserContextMenu.enableContextMenu();
    }
    super.dispose();
  }

License

This project is EUPL licensed. For further details, consult LICENSE.

Libraries

contextmenu_plus