如何在 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 package：

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),
      ),
    );
  }