Occasionally, we are required to perform a job or a sequence of activities involving mouse movements. Take, for example, Google Maps, which changes longitude and latitude based on cursor movement and displays landmarks surrounding coordinates.
When using a phone, your input options are severely limited. Have you ever tried tapping on a single pixel without touching any of the surrounding pixels? This may not be possible on a mobile device, but on other platforms, like the web, we have a mouse at our disposal.
By detecting if the cursor dwells on a region, the MouseRegion widget in Flutter Mobile App development allows you to see what is happening on the screen. Use a MouseRegion class on the widget you want to track mouse movements on, and you will be able to see if the mouse is in that area or not.
Overview
A widget for tracking mouse movements, MouseRegion is used in many different applications today. The MouseRegion class should be used when a particular region of the device screen requires interaction that the device can detect to execute various callbacks, such as onEnter, onHover, and onExit.
Manufacturer:
This widget can be used by simply wrapping it in 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 required fields that must be sent to the builder.
Settings :
Several parameters are associated with MouseRegion:
Execution:
How to include code in a Dart file:
This simple example shows how to use the Mouse Region widget with any Flutter Mobile App Development component.
In the lib folder, create a new dart file named main.dart.
Step 1: The first step is to create a class that implements Stateful Widget and includes a Demo Container widget with a certain size height and width in its body. In this example, we will assume that Container is a widget on which you will track mouse movements.
Container(
height:80.0,
width:80.0,
decoration:box decoration (
color:Colors.blueAccent,
borderRadius:BorderRadius.circular(20.0),
border:Border.all(color:Colors.blueAccent),
),
)
Step 2: All you need to do is wrap your container around the constructor of the MouseRegion class, as shown in the sample code below.
MouseRegion(
child:Container(
height:80.0,
width:80.0,
decoration:box decoration (
color:Colors.blueAccent,
borderRadius:BorderRadius.circular(20.0),
border:Border.all(color:Colors.blueAccent),
),
),
)
Step 3: You can customize the mouse cursor to suit your needs and requirements using the cursor property.
cursor:SystemMouseCursors.click,
There are many additional choices available to you when it comes to modifying sliders. Some of the most basic sliders are:
SystemMouseCursors.click
SystemMouseCursors.help
SystemMouseCursors.move
SystemMouseCursors.allScroll
SystemMouseCursors.cellSystemMouseCursors.cell
SystemMouseCursors.aliasSystemMouseCursors.alias
….
Step 4: Depending on your needs, different events will be triggered.
onEnter :This event will be triggered when a user places the mouse cursor at the specified location.
MouseRegion(
onEnter:(s) {
// your logic goes here…
},
)
Hovering :This will continuously fire as long as the mouse hovers over the selected location in the document.
MouseRegion(
onHover:(s){
// your logic goes here…
},
)
at the exit :This event will be triggered when the mouse moves away from the specified location.
MouseRegion(
to exit:(s) {
// your logic goes here…
},
)
Code file:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
MyApp class extends StatelessWidget {
// This widget is the root of your application.
@override
Widget generation (BuildContext) {
return MaterialApp(
debugShowCheckedModeBanner:false,
title:'Mouse Region',
theme:DataTheme(
primarySwatch:Colors.blue,
),
home:MyHomePage (title:'Flutter Mouse Region'),
);
}
}
class MyHomePage extends StatefulWidget {
Channel Title;
MyHomePage({mandatory this.title});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State
Channel Status=”;
@override
Widget generation (BuildContext) {
back Scaffolding(
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),
),
),
),
],
),
),
)
}
}
Last words
In this tutorial, we've covered the fundamentals of using the MouseRegion widget in flutter mobile app development; you can customize the code according to 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 this blog post has provided you with enough knowledge to experiment with the MouseRegion widget in your Flutter apps in the future. You can also check out Flutter Agency, a leading health app development company in the United States. You are advised to experiment with different floating widgets when using this widget.
