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.

Ivo · Answer 1 · 2023-03-01T06:59:56.993

0

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

edited Mar 01 '23 at 06:59

answered Feb 28 '23 at 14:50

Ivo

18,659
2
23
35

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. – Rohan Jariwala Feb 28 '23 at 14:54
@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 – Ivo Feb 28 '23 at 14:56
that will be great for me if you can. thanks – Rohan Jariwala Feb 28 '23 at 14:58
@RohanJariwala I added it to the asnwer – Ivo Mar 01 '23 at 07:00

score 0 · Accepted Answer · answered May 25 '23 at 13:44

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

Disable default right click on web in flutter

2 Answers2