Виджет ClipRect

Виджет ClipRect не даёт дочернему виджету рисоваться за прямоугольником. Прямоугольник по умолчанию совпадает с размером самого виджета. Чтобы оставить часть дочернего виджета, размер задают снаружи, например через Align и widthFactor.

Синтаксис

ClipRect(
	child: child,
)

Параметры

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

Пример

Давайте покажем только левую половину широкой строки:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ClipRect(
						child: Align(
							alignment: Alignment.centerLeft,
							widthFactor: 0.5,
							child: Text('abcde', style: TextStyle(fontSize: 32)),
						),
				),
			),
		),
	));
}

На экране видна только левая половина строки 'abcde'.

Пример

Давайте обрежем цветной квадрат снизу:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ClipRect(
						child: Align(
							alignment: Alignment.topCenter,
							heightFactor: 0.5,
							child: ColoredBox(
								color: Color(0xFF1565C0),
								child: SizedBox(width: 80, height: 80),
							),
						),
				),
			),
		),
	));
}

На экране синяя полоса: нижняя половина квадрата обрезана.

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

виджет DecoratedBox,
нарисовать BoxDecoration
виджет ColoredBox,
залить дочерний виджет цветом
виджет ClipRRect,
обрезать по скруглению
виджет ClipOval,
обрезать по овалу