Image for post
Image for post

Flutter: Handling mouse events

As web support of Flutter reaches beta channel, some may try to build their web applications in Flutter. While there aren’t much discussions or tutorials about how to handle mouse events, this is why I’m writing this article.

Mouse Movement Events

For mouse movements, you may use the MouseRegion widget.

It takes 3 callbacks as parameter: onEnter(when the cursor enters an area), onHover(when the cursor moves within the area), onExit(when the cursor leaves the area).

You may also get the position of the cursor from the events being passed to the callbacks.

Wheel Scrolling Events

When you want to detect for wheel scrolling events, you may use the Listener widget:

You may find the complete working example in here. Make sure you follow this guide to enable web support for Flutter first.

Issue

At the time of writing, the localPosition of events given by the MouseRegion widget are actually global positions, as the events are not being transformed to local coordinate system.

If you think this feature is important to you, visit this issue page and upvote the issue.

Do you know you can clap up to 50 times for an article? Go give it a try!

A JavaScript/Node/Flutter developer who love technical stuffs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store