Как во Flutter сделать border radius

Часто стоит задача во flutter указать контейнеру уровень скругления его границ. Делается это через свойство decoration и его значения BoxDecoration. У свойства BoxDecoration в свою очередь есть свойство borderRadius.

Открыть код в dartpad

Скругление можно указать круговое сразу для всех сторон.

Container(
  // Указываем декорации блока
  decoration:BoxDecoration(
    // И тут указываем размер скругления границ
    // В данном случае скругление со всех сторон одинаковое
    borderRadius: BorderRadius.circular(10),
  ),
),

Скругление можно указать для каждой стороны по отдельности. Для этого мы можем указать в BorderRadius.only необходимые нам углы, которые нужно скруглить.

Container(
  decoration:BoxDecoration(
    // Также можно указать для каждого угла свой размер скругления
    borderRadius: BorderRadius.only(
      // Верхний левый угол
      topLeft    : Radius.circular(25),
      // Нижний левый угол
      bottomLeft  : Radius.circular(5),
      // Верхний правый угол
      topRight    : Radius.circular(5),
      // Нижний првый угол
      bottomRight : Radius.circular(25),
    ),
  ),
),

Скругление может быть не только круговое, но ещё и эллиптическое. Для этого используем Radius.elliptical.

Container(
  decoration:BoxDecoration(
    // Скругление может быть не только круговым, а ещё и эллиптическим.
    // Сначала указывается координата по X, потом по Y
    borderRadius: BorderRadius.only(
      topLeft     : Radius.elliptical(10,25),
      bottomLeft  : Radius.elliptical(5,5),
      topRight    : Radius.elliptical(25,10),
      bottomRight : Radius.elliptical(40,10),
    ),
  ),
  child:Text("Я скруглён эллиптически")
),