Привет, энтузиаст Flutter! Хотите придать своим изображениям изюминку, придав им закругленные углы? Что ж, вы пришли в нужное место. В этой статье блога мы рассмотрим несколько методов получения закругленных углов изображений во Flutter. Итак, давайте углубимся и украсим эти изображения без особых усилий!

Метод 1: использование BorderRadius.circular

Самый простой способ скруглить углы изображения — использовать класс BorderRadius.circular. Вот пример:

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  // Apply rounded corners
  // with a radius of 20 pixels
  // to all corners
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
  ),
)

Метод 2: применение закругленных углов к определенным границам

Иногда вам может потребоваться применить закругленные углы только к определенным границам изображения. Flutter предоставляет класс BorderRadius.onlyдля достижения этой цели. Вот пример:

Image.asset(
  'assets/image.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  // Apply rounded corners
  // to the top-left and bottom-right corners
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      bottomRight: Radius.circular(20),
    ),
  ),
)

Метод 3: применение закругленных углов к горизонтальным или вертикальным границам

В некоторых случаях вам может потребоваться скруглить только горизонтальные или вертикальные границы изображения. Для этой цели Flutter предоставляет классы BorderRadius.horizontalи BorderRadius.vertical. Посмотрите фрагмент кода ниже:

Image.file(
  File('path/to/image.jpg'),
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  // Apply rounded corners
  // only to the left and right borders
  decoration: BoxDecoration(
    borderRadius: BorderRadius.horizontal(
      left: Radius.circular(20),
      right: Radius.circular(20),
    ),
  ),
)

Метод 4: применение эллиптических закругленных углов

Flutter также позволяет создавать эллиптические закругленные углы для ваших изображений. Этого можно добиться, используя класс BorderRadius.elliptical. Вот пример:

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  // Apply elliptical rounded corners
  // with a radii of 30 and 10 pixels
  decoration: BoxDecoration(
    borderRadius: BorderRadius.elliptical(30, 10),
  ),
)

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