Image rounded corners

Author: FeodorFitsner

client/lib/controls/image.dart

@@ -44,17 +44,31 @@ class ImageControl extends StatelessWidget {
           converter: (store) => store.state.pageUri,
           builder: (context, pageUri) {
             return baseControl(
-                Image.network(getAssetUrl(pageUri!, src),
-                    width: width, height: height, repeat: repeat, fit: fit),
+                _clipCorners(
+                    Image.network(getAssetUrl(pageUri!, src),
+                        width: width, height: height, repeat: repeat, fit: fit),
+                    control),
                 parent,
                 control);
           });
     } else {
       return baseControl(
-          Image.network(src,
-              width: width, height: height, repeat: repeat, fit: fit),
+          _clipCorners(
+              Image.network(src,
+                  width: width, height: height, repeat: repeat, fit: fit),
+              control),
           parent,
           control);
     }
   }
+
+  Widget _clipCorners(Widget image, Control control) {
+    var borderRadius = parseBorderRadius(control, "borderRadius");
+    return borderRadius != null
+        ? ClipRRect(
+            borderRadius: borderRadius,
+            child: image,
+          )
+        : image;
+  }
 }

sdk/python/flet/image.py

@@ -1,6 +1,12 @@
+import json
+from typing import Optional
+
 from beartype import beartype
 
+from flet import border_radius
+from flet.border_radius import BorderRadius
 from flet.control import Control, OptionalNumber
+from flet.embed_json_encoder import EmbedJsonEncoder
 from flet.ref import Ref
 
 try:
@@ -33,6 +39,7 @@ def __init__(
         src: str = None,
         repeat: ImageRepeat = None,
         fit: ImageFit = None,
+        border_radius: BorderRadius = None,
     ):
 
         Control.__init__(
@@ -50,6 +57,7 @@ def __init__(
         self.src = src
         self.fit = fit
         self.repeat = repeat
+        self.border_radius = border_radius
 
     def _get_control_name(self):
         return "image"
@@ -102,3 +110,18 @@ def height(self):
     @beartype
     def height(self, value: OptionalNumber):
         self._set_attr("height", value)
+
+    # border_radius
+    @property
+    def border_radius(self):
+        return self.__border_radius
+
+    @border_radius.setter
+    @beartype
+    def border_radius(self, value: Optional[BorderRadius]):
+        self.__border_radius = value
+        if value and isinstance(value, (int, float)):
+            value = border_radius.all(value)
+        self._set_attr(
+            "borderRadius", json.dumps(value, cls=EmbedJsonEncoder) if value else None
+        )

sdk/python/playground/images.py

@@ -3,7 +3,7 @@
 from time import sleep
 
 import flet
-from flet import Column, ElevatedButton, Image, Page, Row, Text, Theme
+from flet import Column, ElevatedButton, Image, Page, Row, Text, Theme, border_radius
 from flet.stack import Stack
 
 logging.basicConfig(level=logging.DEBUG)
@@ -21,21 +21,22 @@ def main(page: Page):
         height=100,
         fit="contain",
     )
-    images = Row(expand=1, wrap=True, scroll="always")
+    images = Row(expand=1, wrap=False, scroll="always")
 
     page.add(img, images)
 
     for i in range(0, 30):
         images.controls.append(
             Image(
-                src=f"https://picsum.photos/100/100?{i}",
-                width=100,
-                height=100,
+                src=f"https://picsum.photos/200/200?{i}",
+                width=200,
+                height=200,
                 fit="none",
                 repeat="noRepeat",
+                border_radius=border_radius.all(10),
             )
         )
     page.update()
 
 
-flet.app(name="test1", port=8550, target=main, view=flet.FLET_APP)
+flet.app(name="test1", port=8550, target=main, view=flet.WEB_BROWSER)