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

Метод 1: использование BoxDecoration
Класс BoxDecoration позволяет нам определять различные визуальные стили для виджетов, включая контуры контейнеров. Чтобы создать контур с помощью BoxDecoration, мы можем установить для свойства border объект Border с желаемым стилем контура. Вот пример:

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
  ),
  child: Text('Container with Outline'),
)

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

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
  ),
  child: Text('Container with Outline'),
)

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

PhysicalModel(
  color: Colors.transparent,
  borderRadius: BorderRadius.circular(8),
  elevation: 2,
  shadowColor: Colors.black,
  child: Container(
    width: 200,
    height: 100,
    child: Text('Container with Outline'),
  ),
)

Метод 4: использование пользовательской краски
Для более расширенной настройки контура мы можем использовать виджет CustomPaint для рисования пользовательского контура. Реализуя CustomPainter и переопределяя метод paint, мы получаем полный контроль над внешним видом контура. Вот упрощенный пример:

Container(
  width: 200,
  height: 100,
  child: CustomPaint(
    painter: _OutlinePainter(),
    child: Text('Container with Outline'),
  ),
)
class _OutlinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    final path = Path()
      ..addRect(Rect.fromLTWH(0, 0, size.width, size.height));
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

В этой статье мы рассмотрели несколько методов создания контуров контейнеров во Flutter. Мы рассмотрели использование BoxDecoration, свойства border виджета «Контейнер», виджета PhysicalModel и CustomPaint. Используя эти методы, разработчики могут добавить визуальный акцент и стиль в свои приложения Flutter.