Add Line Dash in Flutter

Last Updated On Wednesday 24th Nov 2021

Dotted Line

A widget that provides a canvas on which to draw during the paint phase.

This example shows how the sample custom painter shown at CustomPainter could be used in a CustomPaint widget to display a background to some text.

Flutter Dash

	CustomPaint(
  painter: Sky(),
  child: const Center(
    child: Text(
      'Once upon a time...',
      style: TextStyle(
        fontSize: 40.0,
        fontWeight: FontWeight.w900,
        color: Color(0xFFFFFFFF),
      ),
    ),
  ),
)
	

CustomPainter can help here as well. In this example is a vertical dash line but could be changed easily.

Dash Line

	class LineDash extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashWidth = 9, dashSpace = 5, startX = 0;
    final paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 1;
    while (startX < size.width) {
      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
      startX += dashWidth + dashSpace;
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
	
  • Use the above like below
	CustomPaint(painter: LineDash());
	

References