[Bug]: Can't set border radius using an image

[jonas-martinez]

What happened?

It is impossible with the current state of the lenra components to use the border radius with an image. The container will properly use the radius but the image will just overflow in the corners.

A solution could be to use the Container.decoration.image property to assign an image to a container, then the border radius will work properly and we will still be able to customize the image.

Another solution would be to implement the ClipRRect widget that properly clips its child such as an image. This brings a new component on Lenra that is not straightforward to find but it could be used for other things than images (even though I can't think of any for the moment).

[jonas-martinez]

After some research and testing, it seems quite hard with the current way we handle the widgets on lenra_ui_runner to add a LenraImage into the Container.decoration.image property. Because a BoxDecoration is parsed by the props_parser, it is impossible to set the image property as a Child widget. It will be parsed as a property which required to redefine the whole LenraImage parsing file into the props_parser. Then, the image that is expected by the BoxDecoration.image is not a LenraImage nor a Image.network, it requires a DecorationImage with a NetworkImage as a child (note the difference between Image.network and NetworkImage, these are not the same widgets).

TLDR: We would need to create a specific DecorationImage + NetworkImage parsing which would differ from the LenraImage definition, which may confuse users.

The ClipRRect seems to be a good solution compared to the previous one but according to developers the ClipRRect needs more computing power so this might be bad for apps that use a lot of image clipping. It also adds a new component to Lenra which could be avoided.

We need to discuss this issue with the team. @lenra-io/devs

[taorepoara]

This problem is linked to this issue: lenra-io/api#6