I have a LeafRenderObjectWidget in a Column:

Column(children: [CustomRenderObject(), InkResponse(child: ..), ...])

Below that, there is an InkResponse. Normally, the splash and highlight from the InkResponse would draw above the previous widget in the Column. If I had the following scenario, the highlight and splash would be rendered above the Container:

Column(children: [Container(height: ..), InkResponse(child: ..), ...])

However, in my scenario with the RenderObject, anything I draw at the bottom of my CustomRenderObject widget in the paint method of my RenderBox will be drawn above the InkResponse splash and highlight.
The Material is a parent of the Column.

This means that my InkReponse highlight and splash are cut off at the top. I do not want to add additional padding to my InkResponse. How can I have my InkResponse draw above my RenderBox?


Solutions to this problem are described in the troubleshooting section of the InkResponse class.

If you are just using a simple colored Container or something similar, you can use the Ink widget instead, which will paint onto the Material and thus render the InkResponse's highlight and splash above.

Another solution would be adding a Material of type MaterialType.transparency:

Material(type: MaterialType.transparency, child: InkResponse(..))

This would go right below the InkResponse itself. However, this does not solve my problem as it clips the InkResponse into a rectangle.


The InkResponse will draw the splash above the parent widget in the tree and not in the siblings. That explains why it is painting in your Material widget that is above the Column because the Column itself is just a layout MultiChildRenderObjectWidget.

The solution that you provided, is actually a good approach that is used sometimes, but since you want to render the splash effect in your LeafRenderObjectWidget, and because it has not children, Flutter doesn't know where actually you want to render the splash effect. I'm afraid you can't use InkResponse to render splashes in a leaf widget.

An ugly solution that might work, can go from using a Stack to place each widget on the top of the other but you'd still have to make sure they would have the same appearance. If it is a complex render object, this can be tricky.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.