flutter 虚线

在 Flutter 中绘制虚线可以使用 `CustomPaint` 和 `Path` 绘制。

下面是一个绘制虚线的示例代码：

import 'dart:ui';
import 'package:flutter/material.dart';

class DashedLine extends StatelessWidget {
  final double dashedWidth;
  final double dashedHeight;
  final Color color;

  const DashedLine({
    Key key,
    @required this.dashedWidth,
    @required this.dashedHeight,
    this.color = Colors.grey,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _DashedLinePainter(
        dashedWidth: dashedWidth,
        dashedHeight: dashedHeight,
        color: color,
      ),
    );
  }
}

class _DashedLinePainter extends CustomPainter {
  final double dashedWidth;
  final double dashedHeight;
  final Color color;

  _DashedLinePainter({
    @required this.dashedWidth,
    @required this.dashedHeight,
    @required this.color,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..strokeWidth = dashedHeight
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    final path = Path();

    double startX = 0.0;
    double endX = dashedWidth;

    while (endX < size.width) {
      path.moveTo(startX, dashedHeight / 2);
      path.lineTo(endX, dashedHeight / 2);

      startX += dashedWidth * 2;
      endX += dashedWidth * 2;
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(_DashedLinePainter oldDelegate) {
    return oldDelegate.dashedWidth != dashedWidth ||
        oldDelegate.dashedHeight != dashedHeight ||
        oldDelegate.color != color;
  }
}

使用方式：

DashedLine(
  dashedWidth: 5,
  dashedHeight: 1,
  color: Colors.grey,
)

其中，`dashedWidth` 表示虚线的宽度，`dashedHeight` 表示虚线的高度，`color` 表示虚线的颜色。