Класс CustomClipper

Класс CustomClipper считает форму обрезки. Метод getClip возвращает Path по размеру области. Готовый объект передают в clipper у ClipPath.

Синтаксис

class TriClipper extends CustomClipper<Path>

Методы

Метод	Описание
`getClip`	Возвращает `Path` обрезки.
`shouldReclip`	Решает, пересчитывать ли clip.

Пример

Давайте обрежем контейнер треугольником:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
				child: ClipPath(
				clipper: _TriClipper(),
				child: Container(width: 180, height: 100, color: Colors.pink),
				),
				),
			),
		),
	);
}

class _TriClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final p = Path()..moveTo(size.width/2,0)..lineTo(size.width,size.height)..lineTo(0,size.height)..close();
return p;
}
@override
bool shouldReclip(covariant CustomClipper<Path> old) => false;
}

На экране розовый треугольник.

Пример

Давайте изменим контур:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
				child: ClipPath(
				clipper: _TriClipper(),
				child: Container(width: 180, height: 100, color: Colors.pink),
				),
				),
			),
		),
	);
}

class _TriClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final p = Path()..moveTo(size.width/2,0)..lineTo(size.width,size.height)..lineTo(0,size.height)..close();
return p;
}
@override
bool shouldReclip(covariant CustomClipper<Path> old) => false;
}

На экране другая форма обрезки.

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

виджет ClipPath,
обрезать по своему контуру
виджет ClipOval,
обрезать по овалу
виджет Opacity,
прозрачность дочернего виджета
виджет BackdropFilter,
размыть то, что под дочерним виджетом