Add borderRadius parameter to Image widget for rounded corners #173613
Conversation
There was a problem hiding this comment.
Code Review
This pull request introduces a borderRadius parameter to the Image widget, which is a great enhancement for developer ergonomics. The implementation is clean and the added tests cover the basic functionality. I have a suggestion for a minor performance optimization to avoid creating a ClipRRect when borderRadius is BorderRadius.zero, along with a corresponding test case. Overall, this is a solid contribution.
There was a problem hiding this comment.
Code Review
This pull request introduces a borderRadius property to the Image widget, providing a convenient way to create rounded corners without needing a ClipRRect. The implementation is straightforward and includes corresponding tests. My review focuses on a platform-specific issue on the web where clipping platform views is not supported, which affects Image.network when using an HtmlElementView. I've suggested a code change to handle this case gracefully and a documentation update to inform developers of this limitation. The changes are well-documented, aligning with the Flutter Style Guide's emphasis on useful documentation.
… is null or zero; add test for zero radius case
|
Not sure if this is worth adding versus wrapping Image in a ClipRRect yourself. What do you think @victorsanni ? |
|
@justinmc Thanks for your feedback! While ClipRRect achieves the same effect, adding borderRadius directly to Image reduces the need for an extra composited layer and widget in the tree. It allows the framework to handle clipping internally, which can be more efficient, especially in scrollable lists with many images. This keeps the widget tree shallower, improves readability, and aligns Image with other core widgets that expose borderRadius as a first-class property... |
If I understand correctly this PR still implements the radius by wrapping with an extra
I don't see this as a convincing merit.
Can you point out which widgets you're referring to? I would imagine that the widgets that we've added border radius properties to are those that can't be simply implemented with wrapping with an extra |
|
@dkwingsmt Thanks for you reply! What about updating it to handle the clipping inside RenderImage by calling canvas.clipRRect() before paintImage(), which would draw the image with rounded corners in a single pass and remove the extra widget overhead? |
|
Let's move to #173612 for discussion. |
|
@dkwingsmt Thanks for the motivation and the detailed feedback! This PR no longer wraps Image in ClipRRect. Instead, clipping is done directly in RenderImage.paint using canvas.clipRRect, which keeps the widget tree shallower and improves rendering performance, especially in scrollable lists with many images. This approach also aligns Image with other core widgets like Container, DecoratedBox, and Card that expose borderRadius as a first-class property, making it easier and more consistent for developers to apply rounded corners without extra widgets. |
…m/houssemeddinefadhli81/flutter into add-border-radius-to-image-widget
|
Closing this PR due to discussion under #173612 |
Description
This PR adds an optional borderRadius parameter to the Image widget and its named constructors (Image.asset, Image.network, Image.file, and Image.memory). When provided, the image is clipped directly in the render layer to a rounded rectangle with the specified radius, eliminating the need to wrap the widget in a separate ClipRRect.
This approach:
• Simplifies common UI patterns involving rounded images.
• Improves performance by keeping the widget tree shallower.
• Maintains API consistency with other core widgets that expose borderRadius.
• Keeps backward compatibility, as the parameter defaults to null.
Issue fixed
Closes issue: #173612
Tests added
Pre-launch Checklist
///).