How to Handle Right Click in Flutter

Published Jan 20, 2021

Today I’ll be talking about handling right click on both the Desktop and Web flutter target with a few workarounds to enable a true cross-platform experience.

This article is meant as a complement to my article about cross platform hover.

It’s already baked in

First off, adding support for right click in Flutter Desktop & Web is actually really simple.

You’re most likely already using the Gesture Detector in order to handle taps and presses through the various onTap implementations.

You’ll be please to know that the Gesture Detector class also exposes a number of callbacks to handle both secondary and tertiary taps.

On a mouse, the secondary input is the right click and the tertiary is the right click.

As usual, here’s a dartpad so you can see it all in action.

You’ll also need to handle the context menu that usually appears when right clicking on web (which is already done on my linked dartpad), which is pretty simple thanks to the dart:html library.

// Add an import to dart:html

import 'dart:html';

void main() {

​	// Disable the default browser behavior for right clicking 

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

​	runApp(MyApp());

}

Be careful though: you’ll need to add a guard to both the import and the window event if you wish to run your Flutter app on desktop.

And you’re done! You’ll now be free to create a custom behavior for your right click like spawning a context menu or any action you might wish for.