Виджет Ink

Виджет Ink ставят под InkWell или InkResponse, чтобы ripple шёл по форме. Оформление задают в decoration, размер - в width и height. Дочерний виджет необязателен и передаётся в child.

Синтаксис

Ink(
	decoration: BoxDecoration(
		color: Colors.blue,
		borderRadius: BorderRadius.circular(8),
	),
	child: child,
)

Параметры

Параметр	Описание
`decoration`	Фон и форма под чернилами. Тип `BoxDecoration`.
`width`	Ширина области `Ink`.
`height`	Высота области `Ink`.
`padding`	Отступы вокруг child внутри `Ink`.
`child`	Дочерний виджет поверх декорации.

Пример

Давайте сделаем карточку с InkWell поверх Ink:

import 'package:flutter/material.dart';

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

	@override
	State<InkCard> createState() => _InkCardState();
}

class _InkCardState extends State<InkCard>
{
	var label = 'abcde';

	@override
	Widget build(BuildContext context)
	{
		return Material(
			color: Colors.transparent,
			child: InkWell(
				onTap: () {
					setState(() {
						label = '12345';
					});
				},
				child: Ink(
					decoration: BoxDecoration(
						color: Colors.cyan.shade100,
						borderRadius: BorderRadius.circular(12),
					),
					child: Padding(
						padding: const EdgeInsets.all(24),
						child: Text(label),
					),
				),
			),
		);
	}
}

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

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

Пример

Давайте зададим фиксированный размер Ink без child:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Material(
						child: Ink(
							width: 160,
							height: 56,
							decoration: BoxDecoration(
								color: Colors.deepOrange.shade200,
							),
						),
					),
				),
			),
		),
	);
}

На экране по центру оранжевый прямоугольник заданного размера.

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

виджет InkWell,
который вешает onTap и рисует ripple
виджет InkResponse,
который рисует круглое или произвольное пятно
класс BoxDecoration,
который описывает фон Ink
виджет GestureDetector,
который ловит жесты без Material чернил