Disable default right click on web in flutter

Question

I'm trying to use my own showMenu when user right click with the mouse on web, windows, macOS and long press on android and iOS.

Long press on android and iOS is working and right click on Windows and macOS is working but having issue to prevent default web right click options.

Btw I've tried this solution but when I try to build for platforms rather than web it's not working as in this we are importing html.

import 'dart:html';

  window.document.onContextMenu.listen((evt) => evt.preventDefault());

I've tried with listener like below and it's working perfectly for MacOs and Windows.

Listener(
       onPointerDown: _onPointerDown ,
       child: ....
)

tried with GestureDetector but not working

GestureDetector(
          onSecondaryTapDown: (details) =>_onPointerDown,
          child: ........
    )

Here is the method which displaying menu named as _onPointDown

Future<void> _onPointerDown(PointerDownEvent event) async {
    if (event.kind == PointerDeviceKind.mouse &&
        event.buttons == kSecondaryMouseButton) {
            ....... //I've added show menu code here
    }
  }

Give me your valuable suggestions and help me to solve my issue. Thank you so much in advance.

Answer 1

I'd suggest to use the universal_html package and use it instead of the default html one. That one can be imported on all platforms. And then use for example

import 'package:universal_html/html.dart' as html;

...

if (kIsWeb) {
  html.document.onContextMenu.listen((event) => event.preventDefault());
}

I'm not entirely sure if the if statement is really necessary but that's how I have it in my code because I have other code related to web only in that block.

---

If you don't want to use that package you can try the following. You need to make three files, for example

disabler_web.dart:

import 'dart:html';

void disableRightClick() {
  document.onContextMenu.listen((event) => event.preventDefault());
}

disabler_other.dart:

void disableRightClick() {
  //do nothing
}

and disabler.dart:

export 'package:fluttertest/disabler_other.dart'
  if (dart.library.html) 'package:fluttertest/disabler_web.dart';

In you main.dart you can then do

import 'package:fluttertest/disabler.dart';

void main() {
  disableRightClick();

  ...
}

Of course for your project the path for the imports will be different and you can name the classes however you like

Answer 2

This is how I did it, it will give you a general idea for other cases:

Listener(
    onPointerDown: (event) => _onPointerDown(event),
    child: Text('whatever'),
),

/// Callback when mouse clicked on `Listener` wrapped widget.
Future<void> _onPointerDown(PointerDownEvent event) async {
        // Check if right mouse button clicked
        if (event.kind == PointerDeviceKind.mouse && event.buttons == kSecondaryMouseButton) {

  // Disable context menu
  BrowserContextMenu.disableContextMenu();

  final overlay =
      Overlay.of(context).context.findRenderObject() as RenderBox;
  showMenu<int>(
      context: context,
          items: [
              PopupMenuItem(
                  child: Text('1'),
              ),
              value: 1),
              PopupMenuItem(
                  child: Text('2'),
              ),
              value: 2),  
          ],
          position: RelativeRect.fromSize(
              event.position & Size(43.0, 43.0), overlay.size))

      // Reenable context menu on closing the pop up menu
      .whenComplete(() =>          
          BrowserContextMenu.enableContextMenu())
      .then((value) {
          switch (value) {
              case 1:
              /// 
              break;

              case 2:
              /// 
              break;

              default:
              ///         
      }
  });
  
}

}