Как создавать круглые контейнеры во Flutter: методы и примеры

Чтобы сделать контейнер круглым во Flutter, вы можете использовать один из следующих методов:

  1. Используйте свойство BorderRadius: установите для свойства borderRadiusвиджета Containerзначение BorderRadius.circularзначение. Вот пример:
Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(50),
  ),
);
  1. Используйте виджет ClipOval: оберните виджет Containerвиджетом ClipOval. Это придаст контейнеру овальную форму. Вот пример:
ClipOval(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);
  1. Используйте собственную форму. Вы можете создать собственную форму для своего контейнера, расширив класс CustomClipper. Вот пример создания круглой формы:
class CircularClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(
      center: Offset(size.width / 2, size.height / 2),
      radius: size.width / 2,
    );
  }
  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return false;
  }
}
Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
  ),
  child: ClipPath(
    clipper: CircularClipper(),
    child: Container(
      color: Colors.blue,
    ),
  ),
);