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

Метод 1: Виджет ClipRRect
Виджет ClipRRect позволяет обрезать дочерний виджет в форме закругленного прямоугольника. Указав разные радиусы границ для каждого угла, мы можем добиться эффекта радиуса левой границы. Вот пример:

ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20.0),
    bottomLeft: Radius.circular(20.0),
  ),
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue,
  ),
),

Метод 2: CustomPainter
Используя класс CustomPainter, мы можем создать собственный рисунок, который рисует радиус левой границы на холсте. Вот пример:

class LeftBorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0)
      ..quadraticBezierTo(size.width, size.height / 2, 0, size.height / 2)
      ..close();
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
// Usage:
Container(
  width: 200,
  height: 100,
  child: CustomPaint(
    painter: LeftBorderPainter(),
  ),
),

Метод 3: виджеты «Стек» и «Позиционирование»
Используя виджеты «Стек» и «Позиционирование», мы можем наложить два контейнера и расположить тот, у которого радиус левой границы находится сверху. Вот пример:

Stack(
  children: [
    Container(
      width: 200,
      height: 100,
      color: Colors.blue,
    ),
    Positioned(
      left: 0,
      child: Container(
        width: 20,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
),

Метод 4: BoxDecoration
Класс BoxDecoration позволяет нам определять собственные украшения для контейнеров. Комбинируя BoxDecoration с ClipRRect, мы можем добиться эффекта радиуса левой границы. Вот пример:

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20.0),
      bottomLeft: Radius.circular(20.0),
    ),
  ),
),

Метод 5: Виджет PhysicalModel
Виджет PhysicalModel применяет физический уровень к своему дочернему элементу. Указав форму и радиус границы, мы можем добиться эффекта радиуса левой границы. Вот пример:

PhysicalModel(
  shape: BoxShape.rectangle,
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20.0),
    bottomLeft: Radius.circular(20.0),
  ),
  color: Colors.blue,
  child: Container(
    width: 200,
    height: 100,
  ),
),

Метод 6: виджет ClipPath
С помощью виджета ClipPath мы можем определить собственный путь для обрезки дочернего виджета. Указав путь с радиусом левой границы, мы достигаем желаемого эффекта. Вот пример:

ClipPath(
  clipper: LeftBorderClipper(),
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue,
  ),
),
class LeftBorderClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..quadraticBezierTo(0, size.height / 2, 0, 0)
      ..close();
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Метод 7: виджет преобразования
Используя виджет преобразования, мы можем применить 3D-преобразование к дочернему виджету. Применяя преобразование наклона, мы можем добиться эффекта радиуса левой границы. Вот пример:

Transform(
  transform: Matrix4.skewX(-0.2),
  child: Container(
    width: 200,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20.0),
        bottomLeft: Radius.circular(20.0),
      ),
    ),
  ),
)

В этой статье мы рассмотрели семь различных методов создания эффекта радиуса левой границы для контейнеров Flutter. Эти методы включают использование виджетов ClipRRect, CustomPainter, Stack и Positioned, BoxDecoration, PhysicalModel, ClipPath и Transform. Каждый метод предлагает свои преимущества и гибкость, что позволяет вам выбрать тот, который лучше всего подходит для вашего конкретного случая использования.