Виджет InkWell

Виджет InkWell ставят внутрь Ink или Material, чтобы пятно было видно. Нажатие обрабатывают через onTap, долгое - через onLongPress. Форму всплеска задают borderRadius или customBorder. Дочерний виджет передают в child.

Синтаксис

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

Параметры

Параметр	Описание
`child`	Дочерний виджет внутри области нажатия.
`onTap`	Вызывается при коротком нажатии.
`onDoubleTap`	Вызывается при двойном нажатии.
`onLongPress`	Вызывается при долгом нажатии.
`borderRadius`	Скругление ripple. Тип `BorderRadius`.
`splashColor`	Цвет всплеска при нажатии.

Пример

Давайте сделаем кнопку из текста с ripple:

import 'package:flutter/material.dart';

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

	@override
	State<TapInk> createState() => _TapInkState();
}

class _TapInkState extends State<TapInk>
{
	var label = 'abcde';

	@override
	Widget build(BuildContext context)
	{
		return Material(
			child: InkWell(
				onTap: () {
					setState(() {
						label = '12345';
					});
				},
				child: Padding(
					padding: const EdgeInsets.all(24),
					child: Text(label),
				),
			),
		);
	}
}

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

На экране текст 'abcde'; при нажатии вспыхнет пятно и строка сменится на '12345'.

Пример

Давайте ограничим ripple скруглённым прямоугольником:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Material(
						color: Colors.grey.shade200,
						borderRadius: BorderRadius.circular(12),
						child: InkWell(
							borderRadius: BorderRadius.circular(12),
							onTap: () {},
							child: const Padding(
								padding: EdgeInsets.symmetric(
									horizontal: 32,
									vertical: 16,
								),
								child: Text('12345'),
							),
						),
					),
				),
			),
		),
	);
}

На экране серая плашка с текстом; нажатие даёт ripple по скруглённым углам.

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

виджет InkResponse,
который рисует пятно без обязательного прямоугольника
виджет Ink,
который держит слой чернил на Material
виджет GestureDetector,
который ловит жесты без Material ripple
виджет Listener,
который получает события указателя напрямую