Occasionally, we are required to accomplish a job or a sequence of activities involving mouse movement. Take, for example, Google Maps, which changes longitude and latitude based on the movement of the cursor and displays the landmarks surrounding the coordinates.
When using a phone, your options for input are severely constrained. Have you ever attempted to tap on a single-pixel without touching any of the surrounding pixels? That may be impossible on a mobile device, but on other platforms, such as the web, we have a mouse at our disposal.
By detecting whether the cursor is lingering over a region, the MouseRegion widget in Flutter mobile app development lets you see what’s happening on the screen. Use a MouseRegion class on the widget you want to track mouse movements on, and you’ll be able to see if the mouse is in that area or not.
Overview
Widget for tracking mouse movements, MouseRegion is used in many different applications nowadays. The MouseRegion class should be used when a particular region of the device’s screen needs interaction that the device can detect to run various callbacks, such as onEnter, onHover, and onExit.
Constructor:
This widget may be used by simply wrapping it within the MouseRegion constructor.
The MouseRegion class has the following constructor:
const MouseRegion({
Key? key,
this.onEnter,
this.onExit,
this.onHover,
this.cursor = MouseCursor.defer,
this.opaque = true,
this.child,
})
There are no mandatory fields that must be sent to the constructor.
Parameters:
There are several parameters associated with MouseRegion:
- child: The widget directly underneath this widget is in the tree.
- cursor: The mouse cursor for hovering mouse points over the area.
- onEnter: This event is triggered whenever the mouse cursor leaves this widget while it is still displayed.
- onHover: Triggered whenever the pointer enters a spot within this widget without pressing any buttons.
- opaque: This widget will block the pointer from being detected by other MouseRegions visibly behind it.
Execution:
How to include code into a dart file:
This straightforward example demonstrates how to utilize the Mouse Region widget with any Flutter mobile app development component.
Within the lib folder, create a new dart file named main.dart.
Step 1: The first step is to create a class that implements StatefulWidget and includes a demo Container widget with a height and width of some size in its body. In this example, we’ll assume that Container is a widget on which you’ll be tracking the motions of the mouse.
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: You just need to wrap your Container around the constructor of the MouseRegion class, as seen in the code sample below.
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: You may customize the mouse cursor to meet your needs and requirements using the cursor property.
cursor: SystemMouseCursors.click,
There are plenty of additional choices available to you when it comes to changing cursors. Some of the most fundamental cursors are as follows:
SystemMouseCursors.click
SystemMouseCursors.help
SystemMouseCursors.move
SystemMouseCursors.allScroll
SystemMouseCursors.cell
SystemMouseCursors.alias
….
Step 4: Depending on your requirements, different events will be triggered.
onEnter: This event will be triggered when a user places the mouse cursor in the specified location.
MouseRegion(
onEnter: (s) {
// your logic goes here…
},
)
onHover: This will be triggered continually as long as the mouse is lingering over the selected place in the document.
MouseRegion(
onHover: (s) {
// your logic goes here…
},
)
onExit: This event will be triggered when the mouse is moved away from the specified location.
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),
),
),
),
],
),
),
)
}
}
Final words
In this tutorial, we’ve covered the fundamentals of using the MouseRegion widget in a flutter mobile app development; you may customize the code to suit your preferences. This was a brief introduction to the MouseRegion class from our perspective, and it is functional using the Flutter programming language.
We hope that this blog post has provided you with enough knowledge to experiment with the MouseRegion widget in your flutter applications in the future. You can also consult Flutter Agency a leading healthcare app development company in the USA. It is advised that you experiment with different flutter widgets while using this widget.
