Mouseregion is developed by Flutter, which is used to monitor the entry and exit of the mouse in a certain area as well as the moving track in the desktop application and Web application.

Farmers in yards world, beautiful application experience, from the programmer for the processing of detail, and self requirements state, agriculture in the yard a member of the young people is busy, every day, every week, can leave some footprints, is the creation of content, there is a persistent, is I don’t know why, if you lost, might as well to Chou Chou code track of farmers.

If you are interested, you can pay attention to the public account biglead to get the latest learning materials.

  • Flutter’s Getting Started to Mastery series of articles is here
  • Of course, it is necessary to have the source code here
  • GitHub is a bit slow to take a look at the code cloud source bar
  • A series of tutorials is available here

Let’s take a look at what this article has achieved

Let’s just look at the code

The first is the boot function

The main () {runApp (MaterialApp (/ / don't show the debug TAB debugShowCheckedModeBanner: false, / / display the page of home: DemoMouseRegionPage (),)); }

Then there’s the DemoMouseRegionPage that defines me on this home page

Class DemomouseOnPage extends StatefulWidget {@Override _DemomouseOnPageState createState() => _DemoMouseRegionPageState(); } class _DemomousereGionPageState extends State< DemomousereGionPage bb0 {bool _isEnter = false when the mouse is in the listening area; GlobalKey = globalKey (); globalKey = globalKey (); Color = Colors. Black; Color = Colors. Black; @override Widget build(BuildContext context) { // return Scaffold( appBar: AppBar( title: Text("MouseRegion"), ), body: Container( width: double.infinity, padding: EdgeInsets.all(10), child: Column( children: [buildMouseregion (),],),); [buildMouseregion (),],),); }

I will build the Mouseregion component in the form of function encapsulation. The code is as follows:

Mouseregion buildMouseregion () {return Mouseregion (onEnter: (PointerEnterEvent Event) {print(" enter --"); setState(() { _isEnter = true; }); }, // Exit onExit: (PoInterExitEvent Event) {print(" Exit --"); setState(() { _isEnter = false; }); }, onHover: (PointerHoverEvent event) {//x buildhOverEvent (event); }, child: Container(width: double. Infinity, alignment: alignment. Center, height: 300, child: Text(" What is this?? , key: _globalKey, style: TextStyle(color: _textColor), ), color: _isEnter ? Colors.blueAccent : Colors.blue[200], ), ); }

The background color of the Container is dynamically changed based on _isEnter, which is used to record whether the mouse is in the range of the MouseRegion.

Then in the callback onHover of mouse movement monitoring, the position of the mouse is obtained in real time through the PointerHoverEvent parameter, and the position and size of the Text component are obtained through the Text binding globalKey. To calculate whether the mouse is in the Text area.

Void BuildHoverEvent (PointerHoverEvent Event) {double x = event.position.dx; double y = event.position.dy; / / get the text of the component attribute information RenderBox RenderBox = _globalKey. CurrentContext. FindRenderObject (); Offset = renderBox.localToGlobal(Offset. Zero); double topX = offset.dx; double topY = offset.dy; / / the Size of the text component Size Size = renderBox. PaintBounds. Size; Double bottomX = topX + size.width; double bottomX = topX + size.width; double bottomY = topY + size.height; If (x > topX&&x < bottomX&&y > topY&&y < botTomy) {// TextColor = colors.red; } else { _textColor = Colors.black; } setState(() {}); print("onHover --- $x $y $offset"); }

The completion of