Flutter canvas, how to paint over the child widget?

Question

I am trying to draw red dots over the child textbox widget like this:

For that, I wrapped the child widget with CustomPaint() widget:

 return CustomPaint(
      painter: DotsPainter(), //draws red dots based on child's size
      child: child, //textbox
    );

But the result is this:

How to make CustomPainter "overlay" its child widget?

Thanks.

Answer 1

The CustomPaint has 2 possible painters:

When asked to paint, CustomPaint first asks its painter to paint on the current canvas, then it paints its child, and then, after painting its child, it asks its foregroundPainter to paint.

^{(emphasis mine)}

So if you move your painter to the foregroundPainter instead, it should work fine:

return CustomPaint(
  foregroundPainter: DotsPainter(), //draws red dots based on child's size
  child: child, //textbox
);