What is the MouseRegion Class in Flutter?

• Flutter Widget Guide

Often, we need to do more than one activity, including mouse hover or click. For instance, if we look at Google Maps or a 3D image, once the mouse hovers or moves the cursor, we get the surrounding coordinates and overall image view from 360 degrees.

The condition is also the same when you input something into your phone. Can you touch a single pixel on the screen without touching other pixels? Indeed, this is not possible on any screen size and any platform. Do you know what MouseRegion widgets do in Flutter?

By hovering the mouse over a region of pixels, the MouseRegion widget shows what is going-on on the device’s screen. Therefore, it is essential to use MouseRegion class on the widget to track the mouse movement.

Overview:

MouseRegion widget is used in distinctive applications. This particular class must be utilized when a specific region on the device’s screen requires interaction that the device can identify or feel to execute different callbacks such as onExit, onHover, and onEnter.

Constructor:

The MouseRegion widget may also be used by encasing this class within its constructor.

Let’s check the MouseRegion constructor:

const MouseRegion({
  Key? key,
 this.onHover,
 this.onEnter,
  this.onExit,  
  this.cursor = MouseCursor.defer,
  this.child,
  this.opaque = true,
})

Additionally, there is no essential field that you need to transfer to the MouseRegion constructor.

Parameters:

There are lots of connected parameters:

child: This event is directly underneath the widget in the tree.

onEnter: It is activated whenever the cursor leaves the MouseRegion widget while it is shown.

Cursor: This parameter is used for hovering mouse points over the screen’s area.

opaque: This event has been used to block the pointer from being unveiled by the MouseRegions seemingly after it.

onHover: This event is triggered whenever the mouse pointer enters any spot within this widget without any button click.

Know how you can incorporate the code into a dart file:

The example below shows how to use the MouseRegion widget perfectly with any Flutter app development. Additionally, you can also take the help of a professional Flutter app development company to include the code perfectly.

Make a new dart file with main. Dart name within the lib folder.

Step1:  Initially, create a class that exerts StatefulWidget and incorporates a demo Container widget with a specific height and width. Let’s check the below example of the Container widget to know how to track the mouse motions.

Container(
    height: 60.0,
    width: 60.0,
    decoration: BoxDecoration(
      color: Colors.blueAccent,
      borderRadius: BorderRadius.circular(15.0),
      border: Border.all(color: Colors.blueAccent),
    ),
  )

Step 2:  Now, you have to wrap the container within the MouseRegion constructor as mentioned in the below code:

MouseRegion(
  child: Container(
    height: 60.0,
    width: 60.0,
    decoration: BoxDecoration(
      color: Colors.blueAccent,
      borderRadius: BorderRadius.circular(15.0),
      border: Border.all(color: Colors.blueAccent),
    ),
  ),
)

Step 3:   Customize the mouse cursor using the cursor property.

cursor: SystemMouseCursors.click,

You also have other choices when you talk about changing cursors. Let’s check some fundamental cursors listed below:

SystemMouseCursors.allScroll

SystemMouseCursors.help

SystemMouseCursors.alias

SystemMouseCursors.move

SystemMouseCursors.click

SystemMouseCursors.cell

….

Step 4:   Several events will be triggered relying on your needs.

onEnter:

MouseRegion(
  onEnter: (s) {
    // your logic acts here...
  },
)

onHover:

MouseRegion(
  onHover: (s) {
    // your logic goes here...
  },
)

onExit:

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 key of the app.
  @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 {
  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: 60.0,
                width: 60.0,
               
decoration: BoxDecoration(
                  color: Colors.blueAccent,
                 
borderRadius: BorderRadius.circular(15.0),
                 
border: Border.all(color: Colors.blueAccent),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Final Words:

Being a renowned Flutter development company – Flutter Agency, have tried to explain the MouseRegion class and its associated components used in Flutter app development. We hope this guide will help you know the fundamentals of the MouseRegion widget in the Flutter mobile app development. Connect with us to get trustworthy and cost-effective Flutter app development services.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.