I have created this delete animation: delete animation gif, it works just fine, but i am having performance issues. I am currently using CustomPaint. This is the code:

@override
  paint(Canvas canvas, Size size) async {
    final rows = decoder.pixels.length;
    final columns = decoder.pixels.first.length;

    final paint = Paint()
      ..strokeWidth = decoder.pixelSize
      ..strokeCap = roundedPixels ? StrokeCap.round : StrokeCap.butt;

    for (var x = 0; x < columns; x++) {
      for (var y = 0; y < rows; y++) {
        final int curveIndex = delayAxis == Axis.horizontal ? x : y;

        final progress = delayCurves[curveIndex].transform(this.progress);

        final color = genColor(
          x: x,
          y: y,
          progress: progress,
        );

        final point = genPoint(
          x: x,
          y: y,
          columns: columns,
          rows: rows,
          progress: progress,
        );

        canvas.drawPoints(ui.PointMode.points, [point], paint..color = color);
      }
    }
  }

I know that i can use ui.decodeImageFromPixels to pass some colors and get the image and just draw the image, but as you can see the pixels are not next to each other and they must have some position. please help.

Edit: the gif i provided earlier is only a 100x100 widget so it renders just fine. However, as the widget gets larger, it becomes difficult to render. here is another gif of a larger widget (600x600) large widget animation that demonstrates the performance issues I am having. As you can see, it is super laggy and rendering at less than 2 FPS.

'the pixels are not next to each other and they must have some position', as you can see in the gif, the pixels are moving around in random directions when they animate, so they each have their own position, and because they have individual positions, they are not aligned so I cannot use the ui.decodeImageFromPixels function. This function accepts an Uint8List, which doesn't allow me to specify positions for each pixel.