Виджет ClipPath

Виджет ClipPath рисует дочерний виджет только внутри контура. Контур строит объект в clipper, наследник CustomClipper. За пределами контура пиксели дочернего виджета не видны.

Синтаксис

ClipPath(
	clipper: clipper,
	child: child,
)

Параметры

Параметр	Описание
`clipper`	Объект, который строит контур обрезки.
`child`	Дочерний виджет, который обрезают по контуру.

Пример

Давайте вырежем из синего квадрата треугольник:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ClipPath(
						clipper: _TriClipper(),
						child: ColoredBox(
							color: Color(0xFF1565C0),
							child: SizedBox(width: 120, height: 100),
						),
					),
				),
			),
		),
	);
}

class _TriClipper extends CustomClipper<Path>
{
	@override
	Path getClip(Size size)
	{
		return Path()
			..moveTo(size.width / 2, 0)
			..lineTo(size.width, size.height)
			..lineTo(0, size.height)
			..close();
	}

	@override
	bool shouldReclip(covariant CustomClipper<Path> oldClipper)
	{
		return false;
	}
}

На экране синий треугольник. Углы квадрата за контуром не рисуются.

Пример

Давайте положим в тот же вырез белую строку:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ClipPath(
						clipper: _TriClipper(),
						child: ColoredBox(
							color: Color(0xFF2E7D32),
							child: SizedBox(
								width: 140,
								height: 110,
								child: Center(
									child: Text(
										'12345',
										style: TextStyle(color: Color(0xFFFFFFFF)),
									),
								),
							),
						),
					),
				),
			),
		),
	);
}

class _TriClipper extends CustomClipper<Path>
{
	@override
	Path getClip(Size size)
	{
		return Path()
			..moveTo(size.width / 2, 0)
			..lineTo(size.width, size.height)
			..lineTo(0, size.height)
			..close();
	}

	@override
	bool shouldReclip(covariant CustomClipper<Path> oldClipper)
	{
		return false;
	}
}

На экране зелёный треугольник. Строка '12345' видна только там, где она попала в контур.

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

виджет ClipOval,
обрезать по овалу
виджет ClipRRect,
обрезать по скруглению
класс CustomClipper,
контур для ClipPath
виджет Opacity,
прозрачность дочернего виджета