Tracks The Movement Using MouseRegion Widget In Flutter

Updated 24 January 2024

Tracks The Movement Using MouseRegion Widget In Flutter

In this blog, we will explore the MouseRegin Widget in Flutter. With the help of this widget,  lets you know whenever the mouse pointer enters or exits from a widget.

It could be used to create a user experience (UX) by showing or hiding menu items as the user hovers over the menu icon, and animating buttons when the user hovers over them. When comparing the list of objects that a mouse pointer is hovering on between this frame and the previous frame, MouseRegion is utilized.

For use, we just wrap out the widget inside the MouseRegion widget constructor.


  1. Cursor – When using this parameter, the mouse pointer will hover over the area of the screen.
  2. onEnter – The pointer initiates this callback when it begins to encompass this widget’s region, whether or not buttons are touched.
  3. onExit – When the widget is still mounted, this event is triggered when the mouse pointer leaves it.
  4. onHover – When the mouse cursor enters any area of this widget without a button click, this event is triggered.

We have mentioned these four main properties used in the MouseRegion widget in Flutter.

Read More About Flutter App Development From Mobikul.


We create a list wrap in the MouseRegion widget to select items with the help of hover.

In the above code, we have used a list builder widget wrap with the MouseRegion widget and shown the list of items. if the user hovers over any item then we can perform custom operations like container icon changes and color changes.

This screen showing the example of tv screen.

In the above image, we hovered the cursor on an item, and then the item was highlighted.

The mouse curses over the item then the enter function() calls and if the user changes the mouse position then the exit function() calls.

The hover selector selects elements when you mouse over them.


We have learned about the MouseRegion widget in Flutter and how it works in Flutter.

We have created an app for the TV in the example, and we are selecting an item with the help of a remote control.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home