Custom painter painting outside of the screen for new incoming data?

Question

I am implementing waveform visualization for mic in my app.

class BarVisualizer extends CustomPainter {
  final List<double> waveData;
BarVisualizer({
    required this.waveData,
});
 @override
  void paint(Canvas canvas, Size size) {
    for (var i = 0; i < waveData.length; i++) {
    canvas.drawLine(Offset(i.toDouble() + i  , 0),
          Offset(i.toDouble() +  i, -waveData[i]), wavePaint);     
    }
  }
@override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

above for-loop draws lines for each decibel value I get from mic. As I am using a mic to get data, the list of decibel will get large and it start painting outside of the screen.

So my question is how can I move the previously painted lines back to paint new incoming decibel values inside the screen?

Answer 1

Use the canvas.translate method to move the canvas surface around, so that your draw calls can always be within the screen bounds. You will need to also change your drawLine calls to accommodate for how the canvas has moved.