编辑

我已将其作为软件包添加到pub中。

现在，您要做的就是

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

工作解决方案[已过时]

就像tomerpacific中的this answer中所说，Flutter目前没有默认的虚线框实现。

昨天我工作了一段时间，能够使用CustomPainter提出解决方案。希望这对某人有帮助。

像这样将DashedRect添加到您的容器中

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 400,
          width: 300,
          color: Colors.black12,
          child: DashedRect(color: Colors.red, strokeWidth: 2.0, gap: 3.0,),
        ),
      ),
    );
  }
}

DashedRect.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;

class DashedRect extends StatelessWidget {
  final Color color;
  final double strokeWidth;
  final double gap;

  DashedRect(
      {this.color = Colors.black, this.strokeWidth = 1.0, this.gap = 5.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: EdgeInsets.all(strokeWidth / 2),
        child: CustomPaint(
          painter:
              DashRectPainter(color: color, strokeWidth: strokeWidth, gap: gap),
        ),
      ),
    );
  }
}

class DashRectPainter extends CustomPainter {
  double strokeWidth;
  Color color;
  double gap;

  DashRectPainter(
      {this.strokeWidth = 5.0, this.color = Colors.red, this.gap = 5.0});

  @override
  void paint(Canvas canvas, Size size) {
    Paint dashedPaint = Paint()
      ..color = color
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    double x = size.width;
    double y = size.height;

    Path _topPath = getDashedPath(
      a: math.Point(0, 0),
      b: math.Point(x, 0),
      gap: gap,
    );

    Path _rightPath = getDashedPath(
      a: math.Point(x, 0),
      b: math.Point(x, y),
      gap: gap,
    );

    Path _bottomPath = getDashedPath(
      a: math.Point(0, y),
      b: math.Point(x, y),
      gap: gap,
    );

    Path _leftPath = getDashedPath(
      a: math.Point(0, 0),
      b: math.Point(0.001, y),
      gap: gap,
    );

    canvas.drawPath(_topPath, dashedPaint);
    canvas.drawPath(_rightPath, dashedPaint);
    canvas.drawPath(_bottomPath, dashedPaint);
    canvas.drawPath(_leftPath, dashedPaint);
  }

  Path getDashedPath({
    @required math.Point<double> a,
    @required math.Point<double> b,
    @required gap,
  }) {
    Size size = Size(b.x - a.x, b.y - a.y);
    Path path = Path();
    path.moveTo(a.x, a.y);
    bool shouldDraw = true;
    math.Point currentPoint = math.Point(a.x, a.y);

    num radians = math.atan(size.height / size.width);

    num dx = math.cos(radians) * gap < 0
        ? math.cos(radians) * gap * -1
        : math.cos(radians) * gap;

    num dy = math.sin(radians) * gap < 0
        ? math.sin(radians) * gap * -1
        : math.sin(radians) * gap;

    while (currentPoint.x <= b.x && currentPoint.y <= b.y) {
      shouldDraw
          ? path.lineTo(currentPoint.x, currentPoint.y)
          : path.moveTo(currentPoint.x, currentPoint.y);
      shouldDraw = !shouldDraw;
      currentPoint = math.Point(
        currentPoint.x + dx,
        currentPoint.y + dy,
      );
    }
    return path;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

我不希望这适合所有用例，并且有很大的定制和改进空间。如果发现任何错误，请发表评论。

Answer 2

由于只有两种样式，因此目前不支持dashed border in Flutter：

Solid or None

要将边框添加到小部件，您需要执行以下操作：

在您的小部件中添加BoxDecoration属性
BoxDecoration的部分属性是border
```
decoration: new BoxDecoration(
 border: border.all(
    width: 1,
    style: BorderStyle.solid/none
  ),
);
```
我还发现了this SO question，它演示了如何添加圆形虚线边框。

Answer 3

BorderStyle.none如果要应用某些动画或删除\添加边框功能onTap（例如照明边框）事件或类似事件时可能没有用。

Answer 4

最近扑出了一个插件，用于在小部件周围绘制虚线边框

https://pub.dev/packages/dotted_border

使用此插件，您可以绘制虚线或虚线边框

//1. Install the plugin by add dependencies in pubspace.yaml
dotted_border: ^1.0.6

添加下面的显示边框代码

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

Answer 5

这是一个fdottedline的flutter程序包，可轻松在小部件周围添加虚线边框。这使用最简单的方法来创建虚线视图，并为开发人员提供了创建虚线的能力。它还支持为[Widget]创建虚线边框。支持控制虚线边框的厚度，间距和拐角。

要使用此软件包，请将fdottedline作为依赖项添加到pubspec.yaml文件中。

用法：点状演示

FDottedLine(
  color: Colors.lightBlue[600],
  height: 100.0,
  width: 50,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
)

如何在扑朔迷离的盒子周围创建虚线边框？

5 个答案:

编辑

工作解决方案[已过时]

DashedRect.dart