如何在 Flutter 中为容器创建自定义边框？

Question

我试过像下面的代码那样给容器加上边框：

              Container(
                padding: EdgeInsets.all(15.sp),
                decoration: BoxDecoration(
                  // color: Colors.yellow,
                  border: Border.all(
                    color: kPrimaryColor,
                    width: 7,
                    style: BorderStyle.solid,
                  ),
                ),
                child: QrImage(
                  data: controller.generatedCode,
                  version: QrVersions.auto,
                  size: 300.0,
                ),
              ),

上面的代码给了我一个完整的边框

二维码的边框，我想实现一个类似的边框

Answer 1

试试这个。它会起作用。

Container(
  child: Text(
    'This is a Container',
    textScaleFactor: 2,
    style: TextStyle(color: Colors.black),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(color: Colors.green, spreadRadius: 3),
    ],
  ),
  height: 50,
),

Answer 2

我找到了，使用 dotted_border 包：

Widget get customBorder {
    Path customPath = Path()
      ..moveTo(0, 0)
      ..lineTo(0, 25)
      ..moveTo(0,0)
      ..lineTo(25, 0)
      ..moveTo(75,0)
      ..lineTo(100,0)
      ..lineTo(100,25)
      ..moveTo(0,75)
      ..lineTo(0, 100)
      ..lineTo(25, 100)
      ..moveTo(100,75)
      ..lineTo(100, 100)
      ..lineTo(75,100)
    ;
  return DottedBorder(
      customPath: (_) => customPath,
      color: Colors.indigo,
      dashPattern: [1, 1],
      strokeWidth: 2,
      child: Container(
        height: 100,
        width: 100,
        color: Colors.green.withAlpha(20),
      ),
    );
  }

如何在 Flutter 中为容器创建自定义边框？

How to create a custom border for container in Flutter?

border

dart

flutter

flutter-layout