Виджет MouseRegion

Виджет MouseRegion оборачивает child и вызывает onEnter, когда курсор зашёл, onExit, когда вышел, onHover при движении внутри. Вид курсора задают через cursor. На тач-экранах эти колбэки не срабатывают.

Синтаксис

MouseRegion(
	onEnter: (_) {},
	onExit: (_) {},
	child: child,
)

Параметры

Параметр	Описание
`child`	Дочерний виджет, над которым следят за мышью.
`onEnter`	Курсор вошёл в область виджета.
`onExit`	Курсор покинул область виджета.
`onHover`	Курсор движется внутри области.
`cursor`	Системный курсор над виджетом, например `SystemMouseCursors.click`.

Пример

Давайте подсветим блок при наведении мыши:

import 'package:flutter/material.dart';

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

	@override
	State<HoverBox> createState() => _HoverBoxState();
}

class _HoverBoxState extends State<HoverBox>
{
	var inside = false;

	@override
	Widget build(BuildContext context)
	{
		return MouseRegion(
			onEnter: (_) {
				setState(() {
					inside = true;
				});
			},
			onExit: (_) {
				setState(() {
					inside = false;
				});
			},
			child: Container(
				width: 180,
				height: 80,
				color: inside ? Colors.green.shade200 : Colors.grey.shade300,
				alignment: Alignment.center,
				child: Text(inside ? '12345' : 'abcde'),
			),
		);
	}
}

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: HoverBox(),
				),
			),
		),
	);
}

На экране серая плашка; когда курсор заходит на неё, фон зеленеет и текст меняется на '12345'.

Пример

Давайте покажем курсор-указатель над кнопкой:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: MouseRegion(
						cursor: SystemMouseCursors.click,
						child: GestureDetector(
							onTap: () {},
							child: Container(
								padding: const EdgeInsets.all(16),
								color: Colors.blue,
								child: const Text(
									'abcde',
									style: TextStyle(color: Colors.white),
								),
							),
						),
					),
				),
			),
		),
	);
}

На экране синяя плашка; над ней курсор меняется на «руку», нажатие срабатывает у GestureDetector.

Смотрите также

виджет Listener,
который получает события указателя и стилуса
виджет GestureDetector,
который обрабатывает нажатие на том же child
виджет InkWell,
который даёт ripple при клике на desktop
виджет IgnorePointer,
который отключает события для поддерева