Виджет InkResponse

Виджет InkResponse похож на InkWell, но пятно может быть круглым или произвольным. Нажатие вешают на onTap, радиус всплеска - на radius. Параметр containedInkWell ограничивает ripple границами Material. Дочерний виджет передают в child.

Синтаксис

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

Параметры

Параметр	Описание
`child`	Дочерний виджет внутри области отклика.
`onTap`	Вызывается при коротком нажатии.
`onLongPress`	Вызывается при долгом нажатии.
`radius`	Радиус круглого highlight и splash.
`containedInkWell`	Рисовать ripple только внутри `Material`, как у `InkWell`.
`highlightShape`	Форма подсветки: circle или rectangle.

Пример

Давайте сделаем круглую кнопку с InkResponse:

import 'package:flutter/material.dart';

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

	@override
	State<RoundInk> createState() => _RoundInkState();
}

class _RoundInkState extends State<RoundInk>
{
	var label = 'abcde';

	@override
	Widget build(BuildContext context)
	{
		return Material(
			color: Colors.indigo,
			shape: const CircleBorder(),
			child: InkResponse(
				radius: 40,
				onTap: () {
					setState(() {
						label = '12345';
					});
				},
				child: SizedBox(
					width: 80,
					height: 80,
					child: Center(
						child: Text(
							label,
							style: const TextStyle(color: Colors.white),
						),
					),
				),
			),
		);
	}
}

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

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

Пример

Давайте ограничим ripple границами Material:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Material(
						elevation: 2,
						child: InkResponse(
							containedInkWell: true,
							onTap: () {},
							child: const Padding(
								padding: EdgeInsets.all(28),
								child: Text('abcde'),
							),
						),
					),
				),
			),
		),
	);
}

На экране карточка с текстом; ripple не выходит за её прямоугольник.

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

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