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

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

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

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

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

Метод 3: Пользовательский клиппер
Для более сложных форм обрезки вы можете использовать собственный класс CustomClipper. Это позволяет вам определить собственную логику отсечения. Вот пример создания круглого клипа с помощью специального клиппера:

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(CustomClipper<Rect> oldClipper) {
    return false;
  }
}
ClipRRect(
  borderRadius: BorderRadius.circular(0.0),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: ClipPath(
      clipper: CircularClipper(),
      child: Image.asset('assets/avatar.png'),
    ),
  ),
)

Метод 4: анимация радиуса границы
Вы можете анимировать радиус границы виджета ClipRRectдля создания динамических эффектов. Этого можно достичь с помощью инфраструктуры анимации Flutter. Вот упрощенный пример:

AnimationController _controller;
Animation<double> _borderRadiusAnimation;
@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: Duration(seconds: 2),
    vsync: this,
  );
  _borderRadiusAnimation = Tween(begin: 0.0, end: 50.0).animate(_controller);
  _controller.repeat(reverse: true);
}
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}
ClipRRect(
  borderRadius: BorderRadius.circular(_borderRadiusAnimation.value),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

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