How to disable the context menu on Flutter web? (right click, touch press)

Question

How to disable the context menu in Flutter (2.x, Web / Browser) when e.g. right click or in touch long press on mobile devices (e.g. DevTools mobile view).

I come from web development with Angular etc. In HTML/JS it works like:

document.body.addEventListener('contextmenu', (event) => {
  event.preventDefault();
});

But how to do this on Flutter? Is there contextmenu event which can be disabled. Blocking right click will not work. Because it also appears on mobile long press (on release).

Nimble

Answer 1

Currently there is no official solution. Here is the related GitHub issue: flutter#78671.

Workaround: Just open the dev tools of the browser and execute the following code in the console:

document.body.addEventListener('contextmenu', (event) => {
  event.preventDefault();
});

The hot reload from Flutter does not reload the page. So it will work for the whole session.

Nimble

Now you can disable via the BrowserContextMenu class with the disableContextMenu method. You just have to call it like this somewhere after starting the app: BrowserContextMenu.disableContextMenu() Here is the documentation for it: api.flutter.dev/flutter/services/BrowserContextMenu-class.html – Sextet

Answer 2

Has you can see here: https://api.flutter.dev/flutter/widgets/ContextMenuController-class.html

You can use: BrowserContextMenu.disableContextMenu();

But be careful, this returns a future

Syncopate

Answer 3

That works for me!

For first:

import 'dart:html' as html;

And after this init this code to prevent right-click mouse for showing context menu.

html.document.body!
        .addEventListener('contextmenu', (event) => event.preventDefault());

In my project, it works on version Flutter 2.2.3 • channel stable.

Latrinalatrine

Answer 4

You could just add a script to web\index.html in your project.

<script>
  document.body.addEventListener('contextmenu', (event) => {
    event.preventDefault();
  });
</script>

After this change, debug mode should be restarted. Tested with Flutter 3.3.

Avoid import 'dart:html' in a cross-platform project/context. Flutter will also warn you.

Craigcraighead

Answer 5

import 'package:flutter/services.dart';

void main() {
  if (kIsWeb) {
     BrowserContextMenu.disableContextMenu();
  }
  runApp(const MyApp());
}

Unfeigned

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Swansdown