flutter-虚线

import 'package:flutter/material.dart';

///虚线1
class DashedLineWidget1 extends StatelessWidget {
  final Axis axis; //方向:水平或垂直
  final double dasWidth; //线的宽度
  final double dasHeight; //线的高度
  final Color dasColor; //线的颜色
  final double intervalWidth; //间隔的宽度

  const DashedLineWidget1({
    this.axis,
    @required this.dasWidth,
    @required this.dasHeight,
    @required this.dasColor,
    this.intervalWidth,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final boxWidth = constraints.constrainWidth(); // 容器的宽度
        final dashCount = (boxWidth / (2 * dasWidth)).floor(); //个数
        return Flex(
          direction: axis ?? Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(dashCount, (_) {
            return SizedBox(
              width: dasWidth,
              height: dasHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: dasColor),
              ),
            );
          }),
        );
      },
    );
  }
}

///虚线2
class DashedLineWidget2 extends StatelessWidget {
  final Axis axis; //方向:水平或垂直
  final double dasWidth; //根据虚线的方向确定自己虚线的宽度
  final double dasHeight; //根据虚线的方向确定自己虚线的高度
  final Color dasColor; //虚线的颜色
  final int count; //内部会根据设置的个数和宽高确定密度（虚线的空白间隔）

  DashedLineWidget2({
    this.axis,
    @required this.dasWidth,
    @required this.dasHeight,
    @required this.dasColor,
    @required this.count,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return Flex(
          direction: axis ?? Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(this.count, (int index) {
            return SizedBox(
              width: dasWidth,
              height: dasHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: dasColor),
              ),
            );
          }),
        );
      },
    );
  }
}