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!
