From 218f5ca4195f695fd57bcafddbb50f121aff6eef Mon Sep 17 00:00:00 2001
From: Feodor Fitsner <feodor@appveyor.com>
Date: Thu, 5 May 2022 13:33:04 -0700
Subject: [PATCH] bgColor for ImageButton

---
 client/lib/controls/icon_button.dart | 12 +++++++++++-
 docs/roadmap.md                      |  1 +
 sdk/python/flet/icon_button.py       | 11 +++++++++++
 sdk/python/playground/avatar-test.py | 19 +++++++++++++++++--
 sdk/python/playground/buttons.py     |  8 ++++++++
 5 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/client/lib/controls/icon_button.dart b/client/lib/controls/icon_button.dart
index 34069abaa..efe58fa82 100644
--- a/client/lib/controls/icon_button.dart
+++ b/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);
   }
 }
diff --git a/docs/roadmap.md b/docs/roadmap.md
index ec2340ae6..7e9d0f470 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -741,6 +741,7 @@ Properties:
 
 - icon
 - iconColor
+- bgcolor
 - iconSize
 - tooltip
 - content - a Control representing custom button content
diff --git a/sdk/python/flet/icon_button.py b/sdk/python/flet/icon_button.py
index 9cd7fbf2c..2d1c51827 100644
--- a/sdk/python/flet/icon_button.py
+++ b/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):
diff --git a/sdk/python/playground/avatar-test.py b/sdk/python/playground/avatar-test.py
index 4d9cba4df..231fb99b2 100644
--- a/sdk/python/playground/avatar-test.py
+++ b/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)
diff --git a/sdk/python/playground/buttons.py b/sdk/python/playground/buttons.py
index 418f26bb6..db422cbfb 100644
--- a/sdk/python/playground/buttons.py
+++ b/sdk/python/playground/buttons.py
@@ -6,6 +6,7 @@
 from flet import (
     Column,
     ElevatedButton,
+    FloatingActionButton,
     Icon,
     IconButton,
     OutlinedButton,
@@ -13,6 +14,7 @@
     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...",
+                        ),
                     ]
                 ),
             ],