Sometimes we are required to perform a task or a set of operations that is with regard to the movement of the mouse. For instance take google maps as an example, where longitude and latitude change as per the movement of the mouse and shows you the landmark around the coordinates.
When interacting with a phone your input mechanism is pretty much limited. Have you ever tried to tap a single pixel but not the pixel around it ?? That might be impossible on a phone, but on other platforms (web) we have something else i.e. A mouse.
To know if a mouse is hovering within a particular area use the MouseRegion widget. Just take the widget that should be aware of the mouse movements and wrap it in a MouseRegion, then you will know if a mouse is within that region or not.
Table Of Contents::
Introduction :
MouseRegion is a widget that is used to track the movements of a mouse. MouseRegion is used when we have a specific portion on the device’s screen where we need interaction that can be noticed by the device in order to execute different callbacks e.g. onEnter, on hover, onExit.
This demo video shows how the device tracks the movement of the mouse and shows the current status of mouse movement status.
Constructor:
In order to use the Mouse Region widget, we just need to wrap out the widget inside the MouseRegion constructor.
There are constructor of MouseRegion class :
const MouseRegion({
Key? key,
this.onEnter,
this.onExit,
this.onHover,
this.cursor = MouseCursor.defer,
this.opaque = true,
this.child,
})There are no required fields you need to pass to the constructor.
Parameters :
There are some parameters of MouseRegion :
- child: The widget below this widget is in the tree.
- cursor: The mouse cursor for mouse pointers that are hovering over the region.
- onEnter: Triggered when a mouse pointer has exited this widget when the widget is still mounted.
- onHover: Triggered when a pointer moves into a position within this widget without buttons pressed.
- opaque: Whether this widget should prevent other MouseRegions visually behind it from detecting the pointer.
Implementation :
How to implement code in dart file :
This basic example will show you how to use the Mouse Region widget on any Flutter component.
Create a new dart file called main.dart inside the lib folder.
Step 1: Create a class that extends StatefulWidget with a demo Container widget of some height and width in its body. Here we are assuming Container is a widget on which you need to track the movements of mice.
Container(
height: 80.0,
width: 80.0,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.blueAccent),
),
)Step 2: Simply wrap your Container around the MouseRegion class constructor as shown in the below code snippet.
MouseRegion(
child: Container(
height: 80.0,
width: 80.0,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.blueAccent),
),
),
)Step 3: According to your requirement change the mouse cursor using the cursor property.
cursor: SystemMouseCursors.click,There are plenty of other options you can use to change cursors. Some of the basic cursors are :
SystemMouseCursors.click
SystemMouseCursors.help
SystemMouseCursors.move
SystemMouseCursors.allScrol l
SystemMouseCursors.cell
SystemMouseCursors.alias....Step 4: According to your requirement trigger different events.
- onEnter: This will trigger when a user enters the mouse in the region.
MouseRegion(
onEnter: (s) {
// your logic goes here...
},
)- onHover: This will trigger continuously long as the mouse is hovering on the region.
MouseRegion(
onHover: (s) {
// your logic goes here...
},
)- onExit: This will trigger when the mouse removes from the region.
MouseRegion(
onExit: (s) {
// your logic goes here...
},
)Code File :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Mouse Region',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Mouse Region'),
);
}
}
class MyHomePage extends StatefulWidget {
String title;
MyHomePage({required this.title});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String status = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Mouse Status : $status'),
SizedBox(
height: 30,
),
MouseRegion(
cursor: SystemMouseCursors.click,
opaque: false,
onEnter: (s) {
setState(() {
status = 'Mouse Entered in region';
});
},
onHover: (s) {
setState(() {
status = 'Mouse hovering on region';
});
},
onExit: (s) {
setState(() {
status = 'Mouse exit from region';
});
},
child: Container(
height: 80.0,
width: 80.0,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(20.0),
border: Border.all(color: Colors.blueAccent),
),
),
),
],
),
),
);
}
}Conclusion :
In the article, I have explained the basic example of the MouseRegion widget in a flutter; you can modify this code according to your choice. This was a small introduction to MouseRegion widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the MouseRegion widget in your flutter projects. This is recommended to try using this widget on different flutter widgets.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
