Flutter canvas，如何在子小部件上绘制？

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
);