How to ensure my CustomPaint widget painting is stored in the raster cache?

Question

I have an app that displays a black dot at the point where the user touches the screen like this:

The black dot can be moved by the user as he/she drags his

Answer 1

It's a specificity of Flutter. We are not in React, where "Components" are repainted only when their state/props change.

In Flutter, every time a widget has to repaint the whole tree will too.

Usually, this is not a problem and fairly fast. But in some cases (such as yours), you don't want that. And this is where a fairly undocumented but important widget appears! RepaintBoundary

There's an excellent talk about how Flutter's rendering pipeline works, here: https://www.youtube.com/watch?v=UUfXWzp0-DU

But in short, consider RepaintBoundary as what tells Flutter to split the painting operation into different parts.

Anyway, the solution ? Wrap your Expensive widget in a RepaintBoundary. And suddenly you get 60 FPS.

      new RepaintBoundary(
        child: new CustomPaint(
          painter: new ExpensivePainter(),
          isComplex: true,
          willChange: false,
        ),
      ),