如何在 flutter 中创建锯齿状边框

Question

我想在容器周围创建锯齿状边框（见下图）。有人知道怎么做吗？Jagged border example

Answer 1

有一个插件可以让它变得简单：dotted_border

示例：

DottedBorder(
    color: Colors.black,
    strokeWidth: 1,
    child: FlutterLogo(size: 148),
)

Answer 2

我找到了一个完美的解决方案。我使用 ClipPath 并添加 CustomClipper:

class HorizontalJaggedBorderClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width, 0);
    double y = 0;
    double x = size.width;
    double increment = size.height / 6;
    double delta = size.height * 0.15;

    while (y < size.height) {
      y += increment;
      x = (x == size.width) ? size.width - delta : size.width;
      path.lineTo(x, y);
    }
    path.lineTo(0, size.height);
    x = 0;
    while (y > 0) {
      x = (x == 0) ? delta : 0;
      y -= increment;
      path.lineTo(x, y);
    }

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return oldClipper != this;
  }
}

如何在 flutter 中创建锯齿状边框

How to create a jagged border in flutter

border

flutter

flutter-layout