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

Метод 1: виджет стека
Первый метод предполагает использование виджета стека для наложения нескольких контейнеров с разными стилями границ. Вот пример:

Stack(
  children: [
    Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 2.0),
        borderRadius: BorderRadius.circular(8.0),
      ),
    ),
    Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue, width: 4.0),
        borderRadius: BorderRadius.circular(12.0),
      ),
    ),
    // Add more containers as needed
  ],
)

Метод 2. Пользовательский подход Painter
Если вам нужен больший контроль и гибкость, вы можете использовать виджет CustomPaint для определения пользовательской границы с помощью метода paint. Вот пример:

class CustomBorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.0;
    final path = Path()
      ..addRRect(RRect.fromRectAndRadius(
          Rect.fromLTWH(0, 0, size.width, size.height),
          Radius.circular(8.0)))
      ..addRRect(RRect.fromRectAndRadius(
          Rect.fromLTWH(4, 4, size.width - 8, size.height - 8),
          Radius.circular(12.0)));
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(CustomBorderPainter oldDelegate) => false;
}
// Usage
CustomPaint(
  painter: CustomBorderPainter(),
  child: Container(
    // Your widget content here
  ),
)

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

Container(
  child: Stack(
    children: [
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 2.0),
            borderRadius: BorderRadius.circular(8.0),
          ),
        ),
      ),
      Positioned(
        top: 8,
        left: 8,
        right: 8,
        bottom: 8,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.blue, width: 4.0),
            borderRadius: BorderRadius.circular(12.0),
          ),
        ),
      ),
      // Add more Positioned widgets as needed
    ],
  ),
)

В этой статье мы рассмотрели несколько способов добавления нескольких границ к виджетам Flutter. Предпочитаете ли вы простоту виджета «Стек», гибкость подхода CustomPainter или точное позиционирование с помощью виджетов «Стек» и «Позиционирование», теперь у вас есть целый ряд возможностей, которые помогут оживить ваши виджеты. Поэкспериментируйте с этими техниками и раскройте свой творческий потенциал!