Flutter предоставляет широкий спектр мощных виджетов для создания красивых и интерактивных пользовательских интерфейсов. Одним из таких виджетов является ClipRect, который позволяет разработчикам обрезать дочерние виджеты внутри прямоугольной границы. В этой статье мы рассмотрим различные методы использования ClipRect во Flutter, а также приведем примеры кода, иллюстрирующие каждый подход.

Метод 1: базовый ClipRect
Самый простой способ использовать ClipRect — поместить в него дочерний виджет, указав желаемое поведение клипа с помощью свойства clipBehavior. Вот пример:

ClipRect(
  clipBehavior: Clip.antiAlias,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Text('Hello, ClipRect!'),
  ),
)

Метод 2: Пользовательский клиппер
Flutter также позволяет вам определять собственные клипперы для достижения более сложных форм обрезки. Вы можете создать собственный класс, расширяющий класс CustomClipper<Rect>и переопределяющий методы getClip()и shouldReclip(). Вот пример создания круглого клипера:

class CircularClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(
      center: size.center(Offset.zero),
      radius: size.width / 2,
    );
  }
  @override
  bool shouldReclip(CircularClipper oldClipper) => false;
}
ClipRect(
  clipBehavior: Clip.antiAlias,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Text('Hello, ClipRect!'),
  ),
  clipper: CircularClipper(),
)

Метод 3: ClipRRect
ClipRRect — еще один полезный виджет, который позволяет обрезать дочерние виджеты с закругленными углами. Для определения радиуса закругленных углов требуется свойство borderRadius. Вот пример:

ClipRRect(
  borderRadius: BorderRadius.circular(12),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Text('Hello, ClipRRect!'),
  ),
)

Метод 4: ClipPath
ClipPath обеспечивает еще большую гибкость, позволяя определять собственные формы обрезки с помощью объекта Path. Вы можете использовать различные команды пути для создания сложных фигур. Вот пример создания треугольной машинки для стрижки:

ClipPath(
  clipper: TriangleClipper(),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Text('Hello, ClipPath!'),
  ),
)
class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, size.height);
    path.lineTo(size.width / 2, 0);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }
  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

Виджет ClipRect Flutter предоставляет мощный способ обрезать дочерние виджеты в определенных границах. В этой статье мы рассмотрели различные методы использования ClipRect, включая базовую обрезку, пользовательские обрезки, закругленные углы с помощью ClipRRect и пользовательские формы с помощью ClipPath. Освоив эти методы, вы сможете создавать визуально привлекательные и привлекательные пользовательские интерфейсы в своих приложениях Flutter.

Не забывайте экспериментировать с различным поведением и формами клипов, чтобы добиться желаемых визуальных эффектов. Приятного кодирования!