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.

Laurilaurianne

Answer 1

So, what I want to do was disable right click of web when I have my own right click menu and enable default one again after my right click is done so, they can use default for copy, paste and do other stuff and I don't have to right that again and again.

Here is the solution:

Declare a variable:

StreamSubscription<MouseEvent>? contextMenuListener;

create a method which will disableRightClick

void disableRightClick() {
    if (kIsWeb) {
      contextMenuListener = uni.document.onContextMenu.listen((event) => event.preventDefault());
    }
  }

create a method which will enableRightClick

void enableRightClick() {
    if (kIsWeb) {
      contextMenuListener.cancel();
    }
  }

Call those method like below..

void customRightClick() {
   disableRightClick();
   .......
   //Create your custom click
   .......
   enableRightClick();
}

NOTE: Make sure to use same variable for disable and enable

Laurilaurianne

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:
              ///         
      }
  });
  
}

}

Hoax

Answer 3

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

Scrivener

Firstly thank you so much but is there any other way rather than using the package as I don't want to import the package and increase the burden on app for just one screen. – Laurilaurianne

@RohanJariwala there is a way to do it without that package that I'm aware of but requires a little bit more work. I'll add it to this answer – Scrivener

that will be great for me if you can. thanks – Laurilaurianne

@RohanJariwala I added it to the asnwer – Scrivener