CircleAvatar control added

client/lib/controls/circle_avatar.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+import '../utils/colors.dart';
+import 'create_control.dart';
+
+class CircleAvatarControl extends StatelessWidget {
+  final Control? parent;
+  final Control control;
+  final List<Control> children;
+  final bool parentDisabled;
+
+  const CircleAvatarControl(
+      {Key? key,
+      this.parent,
+      required this.control,
+      required this.children,
+      required this.parentDisabled})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("CircleAvatar build: ${control.id}");
+
+    bool disabled = control.isDisabled || parentDisabled;
+    var foregroundImageUrl = control.attrString("foregroundImageUrl");
+    var backgroundImageUrl = control.attrString("backgroundImageUrl");
+    var contentCtrls = children.where((c) => c.name == "content");
+
+    var avatar = CircleAvatar(
+        foregroundImage: foregroundImageUrl != null
+            ? NetworkImage(foregroundImageUrl)
+            : null,
+        backgroundImage: backgroundImageUrl != null
+            ? NetworkImage(backgroundImageUrl)
+            : null,
+        backgroundColor:
+            HexColor.fromString(context, control.attrString("bgColor", "")!),
+        foregroundColor:
+            HexColor.fromString(context, control.attrString("color", "")!),
+        radius: control.attrDouble("radius"),
+        minRadius: control.attrDouble("minRadius"),
+        maxRadius: control.attrDouble("maxRadius"),
+        child: contentCtrls.isNotEmpty
+            ? createControl(control, contentCtrls.first.id, disabled)
+            : null);
+
+    return constrainedControl(avatar, parent, control);
+  }
+}

client/lib/controls/create_control.dart

@@ -8,6 +8,7 @@ import '../models/control_view_model.dart';
 import 'alert_dialog.dart';
 import 'banner.dart';
 import 'checkbox.dart';
+import 'circle_avatar.dart';
 import 'clipboard.dart';
 import 'column.dart';
 import 'container.dart';
@@ -74,6 +75,12 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
           return ClipboardControl(control: controlView.control);
         case ControlType.image:
           return ImageControl(parent: parent, control: controlView.control);
+        case ControlType.circleAvatar:
+          return CircleAvatarControl(
+              parent: parent,
+              control: controlView.control,
+              children: controlView.children,
+              parentDisabled: parentDisabled);
         case ControlType.progressRing:
           return ProgressRingControl(control: controlView.control);
         case ControlType.progressBar:

client/lib/models/control_type.dart

@@ -2,6 +2,7 @@ enum ControlType {
   alertDialog,
   banner,
   checkbox,
+  circleAvatar,
   clipboard,
   column,
   container,

docs/roadmap.md

@@ -19,6 +19,7 @@
     * [x] Text
     * [x] Icon
     * [x] Image (+custom assets directory for Flet server [see here](https://docs.flutter.dev/development/platform-integration/web-images)).
+    * [x] CircleAvatar
     * [x] ProgressBar
     * [x] ProgressRing
   * Buttons
@@ -40,21 +41,21 @@
     * [x] AlertDialog
 
 * Flet Client
-  * [ ] Web
-  * [ ] Windows ("client" mode - started from Python)
-  * [ ] macOS ("client" mode - started from Python)
+  * [x] Web
+  * [x] Windows ("client" mode - started from Python)
+  * [x] macOS ("client" mode - started from Python)
 
 * Flet Daemon
-  * [ ] "assets" directory with static content
+  * [x] "assets" directory with static content
 
 * Website
   * [ ] Controls S1 reference
-  * [ ] Introduction
+  * [x] Introduction
   * [ ] Blog post
   * [ ] Python Guide
-    * Deployment (+how to change favicon.ico)
-      * Deployment to Replit
-      * Deployment to Fly.io
+    * [ ] Deployment (+how to change favicon.ico)
+      * [x] Deployment to Replit
+      * [x] Deployment to Fly.io
 
 ## Sprint 2
 
@@ -169,6 +170,12 @@
         <td>Image</td>
         <td>S1</td>
     </tr>
+    <tr>
+        <td>✓</td>
+        <td>CircleAvatar</td>
+        <td>Persona</td>
+        <td>S1</td>
+    </tr>    
     <tr>
         <td></td>
         <td>Chip</td>
@@ -631,6 +638,22 @@ Properties:
 - border_radius - to make rounded corners
 - tooltip
 
+## CircleAvatar
+
+Docs: https://api.flutter.dev/flutter/material/CircleAvatar-class.html
+
+Properties:
+
+- foregroundImageUrl
+- backgroundImageUrl
+- color
+- bgColor
+- radius
+- minRadius
+- maxRadius
+- content
+- tooltip
+
 ## ProgressBar
 
 Docs: https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html

sdk/python/flet/__init__.py

@@ -1,6 +1,7 @@
 from flet.alert_dialog import AlertDialog
 from flet.banner import Banner
 from flet.checkbox import Checkbox
+from flet.circle_avatar import CircleAvatar
 from flet.column import Column
 from flet.container import Container
 from flet.control import Control

sdk/python/flet/circle_avatar.py

@@ -0,0 +1,146 @@
+from typing import Optional
+
+from beartype import beartype
+
+from flet.constrained_control import ConstrainedControl
+from flet.control import Control, OptionalNumber
+from flet.ref import Ref
+
+
+class CircleAvatar(ConstrainedControl):
+    def __init__(
+        self,
+        icon: str = None,
+        ref: Ref = None,
+        width: OptionalNumber = None,
+        height: OptionalNumber = None,
+        expand: int = None,
+        opacity: OptionalNumber = None,
+        tooltip: str = None,
+        visible: bool = None,
+        disabled: bool = None,
+        data: any = None,
+        #
+        # Specific
+        #
+        foreground_image_url: str = None,
+        background_image_url: str = None,
+        radius: OptionalNumber = None,
+        min_radius: OptionalNumber = None,
+        max_radius: OptionalNumber = None,
+        color: str = None,
+        bgcolor: str = None,
+        content: Control = None,
+    ):
+        ConstrainedControl.__init__(
+            self,
+            ref=ref,
+            width=width,
+            height=height,
+            expand=expand,
+            opacity=opacity,
+            tooltip=tooltip,
+            visible=visible,
+            disabled=disabled,
+            data=data,
+        )
+
+        self.foreground_image_url = foreground_image_url
+        self.background_image_url = background_image_url
+        self.radius = radius
+        self.min_radius = min_radius
+        self.max_radius = max_radius
+        self.color = color
+        self.bgcolor = bgcolor
+        self.content = content
+
+    def _get_control_name(self):
+        return "circleavatar"
+
+    def _get_children(self):
+        if self.__content == None:
+            return []
+        self.__content._set_attr_internal("n", "content")
+        return [self.__content]
+
+    # foreground_image_url
+    @property
+    def foreground_image_url(self):
+        return self._get_attr("foregroundImageUrl")
+
+    @foreground_image_url.setter
+    def foreground_image_url(self, value):
+        self._set_attr("foregroundImageUrl", value)
+
+    # background_image_url
+    @property
+    def background_image_url(self):
+        return self._get_attr("backgroundImageUrl")
+
+    @background_image_url.setter
+    def background_image_url(self, value):
+        self._set_attr("backgroundImageUrl", value)
+
+    # icon
+    @property
+    def icon(self):
+        return self._get_attr("icon")
+
+    @icon.setter
+    def icon(self, value):
+        self._set_attr("icon", value)
+
+    # radius
+    @property
+    def radius(self):
+        return self._get_attr("radius")
+
+    @radius.setter
+    def radius(self, value):
+        self._set_attr("radius", value)
+
+    # min_radius
+    @property
+    def min_radius(self):
+        return self._get_attr("minRadius")
+
+    @min_radius.setter
+    def min_radius(self, value):
+        self._set_attr("minRadius", value)
+
+    # max_radius
+    @property
+    def max_radius(self):
+        return self._get_attr("maxRadius")
+
+    @max_radius.setter
+    def max_radius(self, value):
+        self._set_attr("maxRadius", value)
+
+    # color
+    @property
+    def color(self):
+        return self._get_attr("color")
+
+    @color.setter
+    def color(self, value):
+        self._set_attr("color", value)
+
+    # bgcolor
+    @property
+    def bgcolor(self):
+        return self._get_attr("bgcolor")
+
+    @bgcolor.setter
+    def bgcolor(self, value):
+        self._set_attr("bgcolor", value)
+
+    # content
+    @property
+    def content(self):
+        return self.__content
+
+    @content.setter
+    @beartype
+    def content(self, value: Optional[Control]):
+        self.__content = value

sdk/python/playground/avatar-test.py

@@ -0,0 +1,29 @@
+import flet
+from flet import CircleAvatar, Icon, Text, colors, icons
+
+
+def main(page):
+    # a "normal" avatar with background image
+    a1 = CircleAvatar(
+        foreground_image_url="https://avatars.githubusercontent.com/u/5041459?s=88&v=4",
+        content=Text("FF"),
+    )
+    # avatar with failing foregroung image and fallback text
+    a2 = CircleAvatar(
+        foreground_image_url="https://avatars.githubusercontent.com/u/_5041459?s=88&v=4",
+        content=Text("FF"),
+    )
+    # avatar with icon, aka icon with inverse background
+    a3 = CircleAvatar(
+        content=Icon(icons.ABC),
+    )
+    # avatar with icon and custom colors
+    a4 = CircleAvatar(
+        content=Icon(icons.WARNING_ROUNDED),
+        color=colors.YELLOW_200,
+        bgcolor=colors.AMBER_700,
+    )
+    page.add(a1, a2, a3, a4)
+
+
+flet.app(target=main)

sdk/python/playground/text1.py

@@ -0,0 +1,17 @@
+import flet
+from flet import Text
+
+
+def main(page):
+    t = Text(
+        value="This is a Text control sample",
+        size=30,
+        color="white",
+        bgcolor="pink",
+        weight="bold",
+        italic=True,
+    )
+    page.add(t)
+
+
+flet.app(target=main)

sdk/python/playground/todo-1.py

@@ -0,0 +1,13 @@
+import flet
+from flet import Checkbox, ElevatedButton, Row, TextField
+
+
+def main(page):
+    def add_clicked(e):
+        page.add(Checkbox(label=new_task.value))
+
+    new_task = TextField(hint_text="Whats needs to be done?", width=300)
+    page.add(Row([new_task, ElevatedButton("Add", on_click=add_clicked)]))
+
+
+flet.app(target=main)