skip to Main Content

How to make a line dash in Flutter like this?

enter image description here

2

Answers


  1. You can use path_drawing package and CustomPainter class:

    Try this:

    import 'package:flutter/material.dart';
    import 'package:path_drawing/path_drawing.dart';
    
    class DashedLinePainter extends CustomPainter {
    
      @override
      void paint(Canvas canvas, Size size) {
        final paint = Paint()
          ..color = Colors.orange
          ..strokeWidth = 5
          ..style = PaintingStyle.stroke
          ..strokeCap = StrokeCap.round;
        Path path = Path();
    
        path.moveTo(70, 170);
        path.arcToPoint(const Offset(120, 210), radius: const Radius.circular(20), clockwise: false);
        path.arcToPoint(const Offset(200, 300), radius: const Radius.circular(50));
        path.arcToPoint(const Offset(300, 400), radius: const Radius.circular(20), clockwise: false);
    
        canvas.drawPath(
          dashPath(
            path,
            dashArray: CircularIntervalList<double>(<double>[15.0, 10.5]),
          ),
          paint,
        );
      }
    
      @override
      bool shouldRepaint(DashedLinePainter oldDelegate) => false;
    
      @override
      bool shouldRebuildSemantics(DashedLinePainter oldDelegate) => false;
    }
    

    My result:

    creenshot

    Login or Signup to reply.
  2. Use path_drawing with CustomPainter class.

    Refer: Medium Post

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search