TextField: suffix_icon, prefix_icon and icon can be Control or str (#4173)

* suffix_icon is a Control

* suffix_icon Control or str in python

* suffixIcon works as str and Control

* Update form_field_control.py

prefix_icon of IconValue type in python

* prefix_icon can be str or Control

* icon field Control or str in Python

* icon of type Control or str in dart

* cleanup

* Dropdown: prefix_icon, suffix_icon and icon can be a string or a Control

* renamed IconValue to IconValueOrControl and made it not optional

Author: InesaFitsner

packages/flet/lib/src/controls/dropdown.dart

@@ -147,8 +147,14 @@ class _DropdownControlState extends State<DropdownControl> with FletStoreMixin {
 
       var prefixControls = itemsView.controlViews
           .where((c) => c.control.name == "prefix" && c.control.isVisible);
+      var prefixIconControls =
+          widget.children.where((c) => c.name == "prefixIcon" && c.isVisible);
       var suffixControls = itemsView.controlViews
           .where((c) => c.control.name == "suffix" && c.control.isVisible);
+      var suffixIconControls =
+          widget.children.where((c) => c.name == "suffixIcon" && c.isVisible);
+      var iconControls =
+          widget.children.where((c) => c.name == "icon" && c.isVisible);
       var counterControls = itemsView.controlViews
           .where((c) => c.control.name == "counter" && c.control.isVisible);
 
@@ -189,8 +195,11 @@ class _DropdownControlState extends State<DropdownControl> with FletStoreMixin {
         decoration: buildInputDecoration(context, widget.control,
             prefix:
                 prefixControls.isNotEmpty ? prefixControls.first.control : null,
+            prefixIcon: prefixIconControls.isNotEmpty ? prefixIconControls.first : null,
             suffix:
                 suffixControls.isNotEmpty ? suffixControls.first.control : null,
+            suffixIcon: suffixIconControls.isNotEmpty ? suffixIconControls.first : null,
+            icon: iconControls.isNotEmpty ? iconControls.first : null,
             counter: counterControls.isNotEmpty
                 ? counterControls.first.control
                 : null,

packages/flet/lib/src/controls/textfield.dart

@@ -123,8 +123,14 @@ class _TextFieldControlState extends State<TextFieldControl>
 
       var prefixControls =
           widget.children.where((c) => c.name == "prefix" && c.isVisible);
+      var prefixIconControls =
+          widget.children.where((c) => c.name == "prefixIcon" && c.isVisible);
       var suffixControls =
           widget.children.where((c) => c.name == "suffix" && c.isVisible);
+      var suffixIconControls =
+          widget.children.where((c) => c.name == "suffixIcon" && c.isVisible);
+      var iconControls =
+          widget.children.where((c) => c.name == "icon" && c.isVisible);
       var counterControls =
           widget.children.where((c) => c.name == "counter" && c.isVisible);
 
@@ -224,7 +230,10 @@ class _TextFieldControlState extends State<TextFieldControl>
               : null,
           decoration: buildInputDecoration(context, widget.control,
               prefix: prefixControls.isNotEmpty ? prefixControls.first : null,
+              prefixIcon: prefixIconControls.isNotEmpty ? prefixIconControls.first : null,
               suffix: suffixControls.isNotEmpty ? suffixControls.first : null,
+              suffixIcon: suffixIconControls.isNotEmpty ? suffixIconControls.first : null,
+              icon: iconControls.isNotEmpty ? iconControls.first : null,
               counter:
                   counterControls.isNotEmpty ? counterControls.first : null,
               customSuffix: revealPasswordIcon,

packages/flet/lib/src/utils/form_field.dart

@@ -54,7 +54,10 @@ InputDecoration buildInputDecoration(
     BuildContext context,
     Control control,
     {Control? prefix,
+    Control? prefixIcon,
     Control? suffix,
+    Control? suffixIcon,
+    Control? icon,
     Control? counter,
     Widget? customSuffix,
     bool focused = false,
@@ -65,11 +68,11 @@ InputDecoration buildInputDecoration(
     control.attrString("border"),
     FormFieldInputBorder.outline,
   )!;
-  var icon = parseIcon(control.attrString("icon"));
+  var iconStr = parseIcon(control.attrString("icon"));
 
-  var prefixIcon = parseIcon(control.attrString("prefixIcon"));
+  var prefixIconStr = parseIcon(control.attrString("prefixIcon"));
   var prefixText = control.attrString("prefixText");
-  var suffixIcon = parseIcon(control.attrString("suffixIcon"));
+  var suffixIconStr = parseIcon(control.attrString("suffixIcon"));
   var suffixText = control.attrString("suffixText");
 
   var bgcolor = control.attrColor("bgcolor", context);
@@ -133,7 +136,10 @@ InputDecoration buildInputDecoration(
       enabledBorder: border,
       focusedBorder: focusedBorder,
       hoverColor: hoverColor,
-      icon: icon != null ? Icon(icon) : null,
+      icon: icon != null
+          ? createControl(control, icon.id, control.isDisabled,
+              parentAdaptive: adaptive)
+          : iconStr !=null? Icon(iconStr): null,
       filled: control.attrBool("filled", false)!,
       fillColor: fillColor ?? (focused ? focusedBgcolor ?? bgcolor : bgcolor),
       hintText: control.attrString("hintText"),
@@ -150,7 +156,10 @@ InputDecoration buildInputDecoration(
           ? control.attrString("errorText")
           : null,
       errorStyle: parseTextStyle(Theme.of(context), control, "errorStyle"),
-      prefixIcon: prefixIcon != null ? Icon(prefixIcon) : null,
+      prefixIcon: prefixIcon != null
+          ? createControl(control, prefixIcon.id, control.isDisabled,
+              parentAdaptive: adaptive)
+          : prefixIconStr !=null? Icon(prefixIconStr): null,
       prefixText: prefixText,
       prefixStyle: parseTextStyle(Theme.of(context), control, "prefixStyle"),
       prefix: prefix != null
@@ -161,9 +170,13 @@ InputDecoration buildInputDecoration(
           ? createControl(control, suffix.id, control.isDisabled,
               parentAdaptive: adaptive)
           : null,
-      suffixIcon: suffixIcon != null ? Icon(suffixIcon) : customSuffix,
+      suffixIcon: suffixIcon != null
+          ? createControl(control, suffixIcon.id, control.isDisabled,
+              parentAdaptive: adaptive)
+          : suffixIconStr !=null? Icon(suffixIconStr): customSuffix,
       suffixText: suffixText,
-      suffixStyle: parseTextStyle(Theme.of(context), control, "suffixStyle"));
+      suffixStyle: parseTextStyle(Theme.of(context), control, "suffixStyle"),
+      );
 }
 
 OverlayVisibilityMode parseVisibilityMode(String type) {

sdk/python/packages/flet-core/src/flet_core/dropdown.py

@@ -18,7 +18,7 @@
     OptionalControlEventCallable,
 )
 from flet_core.utils import deprecated
-
+from flet_core.form_field_control import IconValueOrControl
 
 class Option(Control):
     def __init__(
@@ -181,7 +181,7 @@ def __init__(
         text_style: Optional[TextStyle] = None,
         label: Optional[str] = None,
         label_style: Optional[TextStyle] = None,
-        icon: Optional[str] = None,
+        icon: Optional[IconValueOrControl] = None,
         border: Optional[InputBorder] = None,
         color: Optional[str] = None,
         bgcolor: Optional[str] = None,
@@ -206,11 +206,11 @@ def __init__(
         error_text: Optional[str] = None,
         error_style: Optional[TextStyle] = None,
         prefix: Optional[Control] = None,
-        prefix_icon: Optional[str] = None,
+        prefix_icon: Optional[IconValueOrControl] = None,
         prefix_text: Optional[str] = None,
         prefix_style: Optional[TextStyle] = None,
         suffix: Optional[Control] = None,
-        suffix_icon: Optional[str] = None,
+        suffix_icon: Optional[IconValueOrControl] = None,
         suffix_text: Optional[str] = None,
         suffix_style: Optional[TextStyle] = None,
         #

sdk/python/packages/flet-core/src/flet_core/form_field_control.py

@@ -3,6 +3,7 @@
 
 from flet_core.constrained_control import ConstrainedControl
 from flet_core.control import Control, OptionalNumber
+from flet_core.icon import Icon
 from flet_core.ref import Ref
 from flet_core.text_style import TextStyle
 from flet_core.tooltip import TooltipValue
@@ -23,6 +24,7 @@
 except ImportError:
     from typing_extensions import Literal
 
+IconValueOrControl = Union[str, Control]
 
 class InputBorder(Enum):
     NONE = "none"
@@ -38,7 +40,7 @@ def __init__(
         text_vertical_align: Union[VerticalAlignment, OptionalNumber] = None,
         label: Optional[str] = None,
         label_style: Optional[TextStyle] = None,
-        icon: Optional[str] = None,
+        icon: Optional[IconValueOrControl] = None,
         border: Optional[InputBorder] = None,
         color: Optional[str] = None,
         bgcolor: Optional[str] = None,
@@ -64,11 +66,11 @@ def __init__(
         error_text: Optional[str] = None,
         error_style: Optional[TextStyle] = None,
         prefix: Optional[Control] = None,
-        prefix_icon: Optional[str] = None,
+        prefix_icon: Optional[IconValueOrControl] = None,
         prefix_text: Optional[str] = None,
         prefix_style: Optional[TextStyle] = None,
         suffix: Optional[Control] = None,
-        suffix_icon: Optional[str] = None,
+        suffix_icon: Optional[IconValueOrControl] = None,
         suffix_text: Optional[str] = None,
         suffix_style: Optional[TextStyle] = None,
         rtl: Optional[bool] = None,
@@ -186,6 +188,12 @@ def before_update(self):
         self._set_attr_json("errorStyle", self.__error_style)
         self._set_attr_json("prefixStyle", self.__prefix_style)
         self._set_attr_json("suffixStyle", self.__suffix_style)
+        if isinstance(self.__suffix_icon, str):
+            self._set_attr("suffixIcon", self.__suffix_icon)
+        if isinstance(self.__prefix_icon, str):
+            self._set_attr("prefixIcon", self.__prefix_icon)
+        if isinstance(self.__icon, str):
+            self._set_attr("icon", self.__icon)
 
     def _get_children(self):
         children = []
@@ -195,6 +203,15 @@ def _get_children(self):
         if isinstance(self.__suffix, Control):
             self.__suffix._set_attr_internal("n", "suffix")
             children.append(self.__suffix)
+        if isinstance(self.__suffix_icon, Control):
+            self.__suffix_icon._set_attr_internal("n", "suffixIcon")
+            children.append(self.__suffix_icon)
+        if isinstance(self.__prefix_icon, Control):
+            self.__prefix_icon._set_attr_internal("n", "prefixIcon")
+            children.append(self.__prefix_icon)
+        if isinstance(self.__icon, Control):
+            self.__icon._set_attr_internal("n", "icon")
+            children.append(self.__icon)
         if isinstance(self.__counter, Control):
             self.__counter._set_attr_internal("n", "counter")
             children.append(self.__counter)
@@ -238,12 +255,12 @@ def label_style(self, value: Optional[TextStyle]):
 
     # icon
     @property
-    def icon(self) -> Optional[str]:
-        return self._get_attr("icon")
+    def icon(self) -> Optional[IconValueOrControl]:
+        return self.__icon
 
     @icon.setter
-    def icon(self, value: Optional[str]):
-        self._set_attr("icon", value)
+    def icon(self, value: Optional[IconValueOrControl]):
+        self.__icon = value
 
     # border
     @property
@@ -467,12 +484,12 @@ def counter(self, value: Optional[Control]):
 
     # prefix_icon
     @property
-    def prefix_icon(self) -> Optional[str]:
-        return self._get_attr("prefixIcon")
+    def prefix_icon(self) -> Optional[IconValueOrControl]:
+        return self.__prefix_icon
 
     @prefix_icon.setter
-    def prefix_icon(self, value: Optional[str]):
-        self._set_attr("prefixIcon", value)
+    def prefix_icon(self, value: Optional[IconValueOrControl]):
+        self.__prefix_icon = value
 
     # prefix_text
     @property
@@ -500,15 +517,15 @@ def suffix(self) -> Optional[Control]:
     @suffix.setter
     def suffix(self, value: Optional[Control]):
         self.__suffix = value
-
+    
     # suffix_icon
     @property
-    def suffix_icon(self) -> Optional[str]:
-        return self._get_attr("suffixIcon")
+    def suffix_icon(self) -> Optional[IconValueOrControl]:
+        return self.__suffix_icon
 
     @suffix_icon.setter
-    def suffix_icon(self, value: Optional[str]):
-        self._set_attr("suffixIcon", value)
+    def suffix_icon(self, value: Optional[IconValueOrControl]):
+        self.__suffix_icon = value
 
     # suffix_text
     @property

sdk/python/packages/flet-core/src/flet_core/textfield.py

@@ -23,6 +23,7 @@
     OptionalControlEventCallable,
 )
 from flet_core.utils import deprecated
+from flet_core.form_field_control import IconValueOrControl
 
 try:
     from typing import Literal
@@ -140,7 +141,7 @@ def __init__(
         text_vertical_align: Union[VerticalAlignment, OptionalNumber] = None,
         label: Optional[str] = None,
         label_style: Optional[TextStyle] = None,
-        icon: Optional[str] = None,
+        icon: Optional[IconValueOrControl] = None,
         border: Optional[InputBorder] = None,
         color: Optional[str] = None,
         bgcolor: Optional[str] = None,
@@ -166,11 +167,11 @@ def __init__(
         error_text: Optional[str] = None,
         error_style: Optional[TextStyle] = None,
         prefix: Optional[Control] = None,
-        prefix_icon: Optional[str] = None,
+        prefix_icon: Optional[IconValueOrControl] = None,
         prefix_text: Optional[str] = None,
         prefix_style: Optional[TextStyle] = None,
         suffix: Optional[Control] = None,
-        suffix_icon: Optional[str] = None,
+        suffix_icon: Optional[IconValueOrControl] = None,
         suffix_text: Optional[str] = None,
         suffix_style: Optional[TextStyle] = None,
         #