How to add line dash in Flutter

Question

How to make a line dash in Flutter like this?

Answer 1

Here is the code for horizontal dashed line, like your image. CustomPaint is highly recommended by flutter team for stuff like this. It is fast and efficient for rendering also. You can play with Offset to change the direction.

 class MyClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        painter: MyLinePainter(),
      ),
    );
  }
}

class MyLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var max = 100;
    var dashWidth, dashSpace = 5;
    double startX = 0;
    final paint = Paint()..color = Colors.grey;
    while (max >= 0) {
      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint..strokeWidth = 1);
      final space = (dashSpace + dashWidth);
      startX += space;
      max -= space;
    }
  }