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

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

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(10)),
    color: Colors.blue,
  ),
)

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

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

Метод 3: ShapeDecoration
Класс ShapeDecorationпозволяет определять собственные формы для оформления контейнера. Используя фигуру RoundedRectangleBorder, вы можете легко создавать контейнеры с закругленными углами. Вот пример:

Container(
  width: 200,
  height: 200,
  decoration: ShapeDecoration(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
    color: Colors.green,
  ),
)

Метод 4: пользовательские контейнеры со стеком
Для более сложных сценариев вы можете создавать собственные контейнеры с помощью виджета Stack. Накладывая несколько виджетов и применяя к некоторым из них зажимы с закругленными углами, вы можете создать уникальный и сложный дизайн. Вот пример:

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.yellow,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(25),
        child: Container(
          width: 150,
          height: 150,
          color: Colors.orange,
        ),
      ),
    ),
  ],
)

В этой статье мы рассмотрели несколько методов стилизации контейнеров с закругленными углами во Flutter. Предпочитаете ли вы использовать свойство borderRadius, виджет ClipRRect, класс ShapeDecorationили пользовательские контейнеры с Stackвиджет, теперь у вас есть множество возможностей для достижения желаемого визуального эффекта. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта.