bgColor for ImageButton

Author: FeodorFitsner

client/lib/controls/icon_button.dart

@@ -28,6 +28,8 @@ class IconButtonControl extends StatelessWidget {
     IconData? icon = getMaterialIcon(control.attrString("icon", "")!);
     Color? iconColor =
         HexColor.fromString(context, control.attrString("iconColor", "")!);
+    Color? bgColor =
+        HexColor.fromString(context, control.attrString("bgColor", "")!);
     double? iconSize = control.attrDouble("iconSize");
     var contentCtrls = children.where((c) => c.name == "content");
     bool autofocus = control.attrBool("autofocus", false)!;
@@ -43,7 +45,7 @@ class IconButtonControl extends StatelessWidget {
                 eventData: control.attrs["data"] ?? "");
           };
 
-    IconButton? button;
+    Widget? button;
 
     if (icon != null) {
       button = IconButton(
@@ -65,6 +67,14 @@ class IconButtonControl extends StatelessWidget {
           "Icon button does not have an icon neither content specified.");
     }
 
+    if (bgColor != null) {
+      button = Container(
+        decoration:
+            ShapeDecoration(color: bgColor, shape: const CircleBorder()),
+        child: button,
+      );
+    }
+
     return constrainedControl(button, parent, control);
   }
 }

docs/roadmap.md

@@ -741,6 +741,7 @@ Properties:
 
 - icon
 - iconColor
+- bgcolor
 - iconSize
 - tooltip
 - content - a Control representing custom button content

sdk/python/flet/icon_button.py

@@ -25,6 +25,7 @@ def __init__(
         #
         icon_size: OptionalNumber = None,
         icon_color: str = None,
+        bgcolor: str = None,
         content: Control = None,
         autofocus: bool = None,
         on_click=None,
@@ -45,6 +46,7 @@ def __init__(
         self.icon = icon
         self.icon_size = icon_size
         self.icon_color = icon_color
+        self.bgcolor = bgcolor
         self.content = content
         self.autofocus = autofocus
         self.on_click = on_click
@@ -85,6 +87,15 @@ def icon_color(self):
     def icon_color(self, value):
         self._set_attr("iconColor", value)
 
+    # bgcolor
+    @property
+    def bgcolor(self):
+        return self._get_attr("bgcolor")
+
+    @bgcolor.setter
+    def bgcolor(self, value):
+        self._set_attr("bgcolor", value)
+
     # on_click
     @property
     def on_click(self):

sdk/python/playground/avatar-test.py

@@ -1,5 +1,6 @@
 import flet
-from flet import CircleAvatar, Icon, Text, colors, icons
+from flet import CircleAvatar, Icon, Stack, Text, alignment, colors, icons
+from flet.container import Container
 
 
 def main(page):
@@ -23,7 +24,21 @@ def main(page):
         color=colors.YELLOW_200,
         bgcolor=colors.AMBER_700,
     )
-    page.add(a1, a2, a3, a4)
+    # avatar with online status
+    a5 = Stack(
+        [
+            CircleAvatar(
+                foreground_image_url="https://avatars.githubusercontent.com/u/5041459?s=88&v=4"
+            ),
+            Container(
+                content=CircleAvatar(bgcolor=colors.GREEN, radius=5),
+                alignment=alignment.bottom_left,
+            ),
+        ],
+        width=40,
+        height=40,
+    )
+    page.add(a1, a2, a3, a4, a5)
 
 
 flet.app(target=main)

sdk/python/playground/buttons.py

@@ -6,13 +6,15 @@
 from flet import (
     Column,
     ElevatedButton,
+    FloatingActionButton,
     Icon,
     IconButton,
     OutlinedButton,
     Page,
     Row,
     Text,
     TextButton,
+    icons,
 )
 
 logging.basicConfig(level=logging.DEBUG)
@@ -105,6 +107,12 @@ def main(page: Page):
                             icon_color="pink600",
                             tooltip="Delete record",
                         ),
+                        IconButton(
+                            icon=icons.ANDROID,
+                            icon_color="white",
+                            bgcolor="blue",
+                            tooltip="Beep... Beep... Beep...",
+                        ),
                     ]
                 ),
             ],