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

【问题标题】：How to create a custom border for container in Flutter?如何在 Flutter 中为容器创建自定义边框？
【发布时间】：2021-12-01 12:47:01
【问题描述】：

我尝试像这样的代码为容器设置边框：

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

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

二维码的边框，我想实现这样的边框

【问题讨论】：

请提供一个代码sn-p你到目前为止所取得的成就。
检查CornerDecorationTest

标签： flutter dart flutter-layout border

【解决方案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,
),

【讨论】：

请检查链接中的图片，它不起作用
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案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),
      ),
    );
  }

【讨论】：