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

Метод 1: базовая реализация
Самый простой способ использовать ClipRRect — обернуть его вокруг дочернего виджета и указать желаемый радиус границы. Вот пример:

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.blue,
  ),
),

Этот фрагмент кода создает прямоугольный контейнер с закругленными углами радиуса 10,0.

Метод 2: пользовательские радиусы границ
ClipRRect также позволяет указать разные радиусы границ для каждого угла. Этого можно добиться с помощью конструктора BorderRadius.only. Вот пример:

ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20.0),
    topRight: Radius.circular(10.0),
    bottomLeft: Radius.circular(5.0),
    bottomRight: Radius.circular(15.0),
  ),
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
),

В этом примере верхний левый угол имеет радиус 20,0, верхний правый угол имеет радиус 10,0, нижний левый угол имеет радиус 5,0 и нижний правый угол имеет радиус 15.0.

Метод 3: обрезка изображения
ClipRRect также можно использовать для обрезки изображения с закругленными углами. Вот пример:

ClipRRect(
  borderRadius: BorderRadius.circular(50.0),
  child: Image.asset('assets/images/avatar.png'),
),

В этом фрагменте кода изображение с именем «avatar.png» обрезано круговой границей с радиусом 50,0.

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

Stack(
  children: [
    ClipRRect(
      borderRadius: BorderRadius.circular(20.0),
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.red,
      ),
    ),
    ClipRRect(
      borderRadius: BorderRadius.circular(30.0),
      child: Container(
        width: 150.0,
        height: 150.0,
        color: Colors.yellow,
      ),
    ),
  ],
),

В этом примере красный контейнер с закругленными углами перекрывается желтым контейнером с более крупными закругленными углами.

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