Ads by ProfitSence
Close

Add Line Dash in Flutter

Last Updated on Wednesday 5th Oct 2022

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