Виджет GestureDetector

Виджет GestureDetector не рисует сам, а вешает обработчики на child. Короткое нажатие ловят через onTap, долгое - через onLongPress, сдвиг пальцем - через onPanUpdate. Параметр behavior задаёт HitTestBehavior и решает, кто получит попадание.

Синтаксис

GestureDetector(
	onTap: () {},
	child: child,
)

Параметры

Параметр	Описание
`child`	Дочерний виджет, на котором ловят жесты.
`onTap`	Вызывается при коротком нажатии.
`onDoubleTap`	Вызывается при двойном нажатии.
`onLongPress`	Вызывается при долгом нажатии.
`onPanUpdate`	Вызывается при перетаскивании, передаёт смещение.
`behavior`	Как участвовать в hit test. Принимает `HitTestBehavior`.

Пример

Давайте сменим текст по нажатию:

import 'package:flutter/material.dart';

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

	@override
	State<TapLabel> createState() => _TapLabelState();
}

class _TapLabelState extends State<TapLabel>
{
	var label = 'abcde';

	@override
	Widget build(BuildContext context)
	{
		return GestureDetector(
			onTap: () {
				setState(() {
					label = label == 'abcde' ? '12345' : 'abcde';
				});
			},
			child: Text(label),
		);
	}
}

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

На экране по центру текст 'abcde'; при каждом нажатии он меняется на '12345' и обратно.

Пример

Давайте сдвинем квадрат перетаскиванием:

import 'package:flutter/material.dart';

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

	@override
	State<DragBox> createState() => _DragBoxState();
}

class _DragBoxState extends State<DragBox>
{
	var offset = Offset.zero;

	@override
	Widget build(BuildContext context)
	{
		return GestureDetector(
			onPanUpdate: (details) {
				setState(() {
					offset += details.delta;
				});
			},
			child: Transform.translate(
				offset: offset,
				child: Container(
					width: 80,
					height: 80,
					color: Colors.teal,
					alignment: Alignment.center,
					child: const Text('abcde'),
				),
			),
		);
	}
}

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

На экране бирюзовый квадрат следует за пальцем или курсором при перетаскивании.

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

виджет InkWell,
который рисует чернильное пятно при нажатии на Material
виджет Listener,
который получает сырые события указателя
перечисление HitTestBehavior,
которое настраивает попадание для GestureDetector
виджет RawGestureDetector,
который подключает свои распознаватели жестов