0

Let's say we have this custom painter,

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headline4,
        ),
        CustomPaint(painter: Painter(), size: const Size(200, 200))
      ],
    );
  }
}

class Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 10
      ..strokeCap = StrokeCap.round;
    canvas.drawLine(const Offset(150, 0), const Offset(150, 150), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

When we run this, it will draw a strait vertical line.

Now what I want to do is cut this line vertically (not horizontally). Or I would say draw only some thickness of this line and preferably animate it to draw its full thickness. I will have multiple lines like a waveform so using customclipper might not work as I will have 100s of line next to each other and will have to animate them.

Here is a reference link. Notice when they play the audio how orange color get filled to that waveform I want something like that.

Pokaboom
  • 1,110
  • 9
  • 28
  • I would say, Create your background set of lines first. Draw another set of lines on top overlaying your background layer and make these lines orange. Now use a Rectangle clipper for the top layer and reveal the orange lines from left to right. – Afridi Kayal Nov 06 '22 at 15:38

0 Answers0