MouseRegion Widget

Project Preview

  • Interested in seeing the live demo? Click here to explore.
  • Want to view the source code? Visit the project on GitHub.

Code Snippet

import 'package:flutter/material.dart';

class MouseRegionWidget extends StatefulWidget {
  const MouseRegionWidget({super.key});

  @override
  State<MouseRegionWidget> createState() => _MouseRegionWidgetState();
}

class _MouseRegionWidgetState extends State<MouseRegionWidget> {
  int enterCount = 0;
  int exitCount = 0;
  double x = 0.0;
  double y = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("MouseRegion Widget"),
      ),
      body: Center(
        child: MouseRegion(
          onEnter: (PointerEvent details) {
            setState(() {
              enterCount++;
            });
          },
          onHover: (PointerEvent details) {
            x = details.position.dx;
            y = details.position.dy;
          },
          onExit: (PointerEvent details) {
            setState(() {
              exitCount++;
            });
          },
          child: Container(
            color: Colors.orangeAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Enters: $enterCount',
                  style: const TextStyle(
                    fontSize: 40,
                  ),
                ),
                Text(
                  'Exists $exitCount',
                  style: const TextStyle(
                    fontSize: 40,
                  ),
                ),
                Text(
                  'Cursor: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
                  style: const TextStyle(
                    fontSize: 25,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}