v1: IconButton variants

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

@@ -53,7 +53,7 @@ class _ButtonControlState extends State<ButtonControl> with FletStoreMixin {
     bool isTextButton = widget.control.type == "TextButton";
     bool isOutlinedButton = widget.control.type == "OutlinedButton";
 
-    var url = widget.control.getString("url");
+    var url = widget.control.getUrl("url");
     var iconColor = widget.control.getColor("icon_color", context);
     var clipBehavior =
         widget.control.getClipBehavior("clip_behavior", Clip.none)!;
@@ -65,8 +65,7 @@ class _ButtonControlState extends State<ButtonControl> with FletStoreMixin {
     Function()? onPressed = !widget.control.disabled
         ? () {
             if (url != null) {
-              openWebBrowser(url,
-                  webWindowName: widget.control.getString("url_target"));
+              openWebBrowser(url);
             }
             widget.control.triggerEvent("click");
           }

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

@@ -471,11 +471,11 @@ class FletCustomPainter extends CustomPainter {
     }
     for (var elem in (j as List)) {
       var type = elem["_type"];
-      if (type == "moveto") {
+      if (type == "MoveTo") {
         path.moveTo(parseDouble(elem["x"], 0)!, parseDouble(elem["y"], 0)!);
-      } else if (type == "lineto") {
+      } else if (type == "LineTo") {
         path.lineTo(parseDouble(elem["x"], 0)!, parseDouble(elem["y"], 0)!);
-      } else if (type == "arc") {
+      } else if (type == "Arc") {
         path.addArc(
             Rect.fromLTWH(
                 parseDouble(elem["x"], 0)!,
@@ -484,20 +484,20 @@ class FletCustomPainter extends CustomPainter {
                 parseDouble(elem["height"], 0)!),
             parseDouble(elem["start_angle"], 0)!,
             parseDouble(elem["sweep_angle"], 0)!);
-      } else if (type == "arcto") {
+      } else if (type == "ArcTo") {
         path.arcToPoint(
             Offset(parseDouble(elem["x"], 0)!, parseDouble(elem["y"], 0)!),
             radius: Radius.circular(parseDouble(elem["radius"], 0)!),
             rotation: parseDouble(elem["rotation"], 0)!,
             largeArc: parseBool(elem["large_arc"], false)!,
             clockwise: parseBool(elem["clockwise"], true)!);
-      } else if (type == "oval") {
+      } else if (type == "Oval") {
         path.addOval(Rect.fromLTWH(
             parseDouble(elem["x"], 0)!,
             parseDouble(elem["y"], 0)!,
             parseDouble(elem["width"], 0)!,
             parseDouble(elem["height"], 0)!));
-      } else if (type == "rect") {
+      } else if (type == "Rect") {
         var borderRadius = parseBorderRadius(elem["border_radius"]);
         path.addRRect(RRect.fromRectAndCorners(
             Rect.fromLTWH(
@@ -509,25 +509,25 @@ class FletCustomPainter extends CustomPainter {
             topRight: borderRadius?.topRight ?? Radius.zero,
             bottomLeft: borderRadius?.bottomLeft ?? Radius.zero,
             bottomRight: borderRadius?.bottomRight ?? Radius.zero));
-      } else if (type == "conicto") {
+      } else if (type == "QuadraticTo") {
         path.conicTo(
             parseDouble(elem["cp1x"], 0)!,
             parseDouble(elem["cp1y"], 0)!,
             parseDouble(elem["x"], 0)!,
             parseDouble(elem["y"], 0)!,
             parseDouble(elem["w"], 0)!);
-      } else if (type == "cubicto") {
+      } else if (type == "CubicTo") {
         path.cubicTo(
             parseDouble(elem["cp1x"], 0)!,
             parseDouble(elem["cp1y"], 0)!,
             parseDouble(elem["cp2x"], 0)!,
             parseDouble(elem["cp2y"], 0)!,
             parseDouble(elem["x"], 0)!,
             parseDouble(elem["y"], 0)!);
-      } else if (type == "subpath") {
+      } else if (type == "SubPath") {
         path.addPath(buildPath(elem["elements"]),
             Offset(parseDouble(elem["x"], 0)!, parseDouble(elem["y"], 0)!));
-      } else if (type == "close") {
+      } else if (type == "Close") {
         path.close();
       }
     }

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

@@ -18,8 +18,7 @@ class ContainerControl extends StatelessWidget with FletStoreMixin {
     var ink = control.getBool("ink", false)!;
     var onClick = control.getBool("on_click", false)!;
     var onTapDown = control.getBool("on_tap_down", false)!;
-    var url = control.getString("url");
-    var urlTarget = control.getString("url_target");
+    var url = control.getUrl("url");
     var onLongPress = control.getBool("on_long_press", false)!;
     var onHover = control.getBool("on_hover", false)!;
     var ignoreInteractions = control.getBool("ignore_interactions", false)!;
@@ -66,7 +65,7 @@ class ContainerControl extends StatelessWidget with FletStoreMixin {
             onTap: onClick || url != null || onTapDown
                 ? () {
                     if (url != null) {
-                      openWebBrowser(url, webWindowName: urlTarget);
+                      openWebBrowser(url);
                     }
                     if (onClick) {
                       control.triggerEvent("click");
@@ -162,7 +161,7 @@ class ContainerControl extends StatelessWidget with FletStoreMixin {
             onTap: onClick || url != null
                 ? () {
                     if (url != null) {
-                      openWebBrowser(url, webWindowName: urlTarget);
+                      openWebBrowser(url);
                     }
                     if (onClick) {
                       control.triggerEvent("click");

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

@@ -136,12 +136,11 @@ class _CupertinoButtonControlState extends State<CupertinoButtonControl> {
               .copyWith(color: color),
           child: child);
     }
-    var url = widget.control.getString("url");
+    var url = widget.control.getUrl("url");
     Function()? onPressed = !widget.control.disabled
         ? () {
             if (url != null) {
-              openWebBrowser(url,
-                  webWindowName: widget.control.getString("url_target"));
+              openWebBrowser(url);
             }
             widget.control.triggerEvent("click");
           }

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

@@ -38,17 +38,16 @@ class CupertinoListTileControl extends StatelessWidget {
         control.getDouble("leading_to_title", notched ? 12.0 : 16.0)!;
     var onclick = control.getBool("on_click", false)!;
     var toggleInputs = control.getBool("toggle_inputs", false)!;
-    var url = control.getString("url");
-    var urlTarget = control.getString("url_target");
+    var url = control.getUrl("url");
 
     Function()? onPressed =
-        (onclick || toggleInputs || url != "") && !control.disabled
+        (onclick || toggleInputs || url != null) && !control.disabled
             ? () {
                 if (toggleInputs) {
                   _clickNotifier.onClick();
                 }
                 if (url != null) {
-                  openWebBrowser(url, webWindowName: urlTarget);
+                  openWebBrowser(url);
                 }
                 if (onclick) {
                   control.triggerEvent("click");

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

@@ -25,8 +25,7 @@ class FloatingActionButtonControl extends StatelessWidget {
 
     var content = control.buildTextOrWidget("content");
     var icon = control.buildIconOrWidget("icon");
-    var url = control.getString("url");
-    var urlTarget = control.getString("url_target");
+    var url = control.getUrl("url");
     var disabledElevation = control.getDouble("disabled_elevation");
     var elevation = control.getDouble("elevation");
     var hoverElevation = control.getDouble("hover_elevation");
@@ -49,7 +48,7 @@ class FloatingActionButtonControl extends StatelessWidget {
         ? null
         : () {
             if (url != null) {
-              openWebBrowser(url, webWindowName: urlTarget);
+              openWebBrowser(url);
             }
             control.triggerEvent("click");
           };

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

@@ -68,7 +68,6 @@ class _IconButtonControlState extends State<IconButtonControl>
       var highlightColor = widget.control.getColor("highlight_color", context);
       var selectedIconColor =
           widget.control.getColor("selected_icon_color", context);
-      var bgcolor = widget.control.getColor("bgcolor", context);
       var disabledColor = widget.control.getColor("disabled_color", context);
       var hoverColor = widget.control.getColor("hover_color", context);
       var splashColor = widget.control.getColor("splash_color", context);
@@ -82,15 +81,13 @@ class _IconButtonControlState extends State<IconButtonControl>
       var autofocus = widget.control.getBool("autofocus", false)!;
       var enableFeedback = widget.control.getBool("enable_feedback", true)!;
       var selected = widget.control.getBool("selected", false)!;
-      var url = widget.control.getString("url");
-      var urlTarget = widget.control.getString("url_target");
       var mouseCursor = widget.control.getMouseCursor("mouse_cursor");
-      var visualDensity = widget.control.getVisualDensity("visual_density");
+      var url = widget.control.getUrl("url");
 
       Function()? onPressed = !widget.control.disabled
           ? () {
               if (url != null) {
-                openWebBrowser(url, webWindowName: urlTarget);
+                openWebBrowser(url);
               }
               widget.control.triggerEvent("click");
             }
@@ -109,7 +106,7 @@ class _IconButtonControlState extends State<IconButtonControl>
 
       var theme = Theme.of(context);
       var style = parseButtonStyle(
-          widget.control.get("style"), Theme.of(context),
+          widget.control.internals?["style"], Theme.of(context),
           defaultForegroundColor: theme.colorScheme.primary,
           defaultBackgroundColor: Colors.transparent,
           defaultOverlayColor: Colors.transparent,
@@ -126,27 +123,74 @@ class _IconButtonControlState extends State<IconButtonControl>
       if (icon is Control) {
         iconWidget = ControlWidget(control: icon);
       } else if (icon is String) {
-        iconWidget = Icon(
-          widget.control.getIcon("icon"),
-          color: iconColor,
-        );
+        iconWidget = Icon(widget.control.getIcon("icon"), color: iconColor);
       } else if (content != null) {
         iconWidget = ControlWidget(control: content);
       }
 
       Widget? selectedIconWidget;
-
       if (selectedIcon is Control) {
         selectedIconWidget = ControlWidget(control: selectedIcon);
       } else if (selectedIcon is String) {
-        selectedIconWidget = Icon(
-          widget.control.getIcon("selected_icon"),
-          color: selectedIconColor,
-        );
+        selectedIconWidget = Icon(widget.control.getIcon("selected_icon"),
+            color: selectedIconColor);
       }
 
-      if (iconWidget != null) {
-        button = IconButton(
+      if (iconWidget == null) {
+        return const ErrorControl(
+            "IconButton must have either icon or a visible content specified.");
+      }
+
+      var variant = widget.control.type;
+
+      if (variant == "FilledIconButton") {
+        button = IconButton.filled(
+            autofocus: autofocus,
+            focusNode: _focusNode,
+            highlightColor: highlightColor,
+            disabledColor: disabledColor,
+            hoverColor: hoverColor,
+            enableFeedback: enableFeedback,
+            padding: padding,
+            alignment: alignment,
+            focusColor: focusColor,
+            splashColor: splashColor,
+            splashRadius: splashRadius,
+            icon: iconWidget,
+            iconSize: iconSize,
+            mouseCursor: mouseCursor,
+            style: style,
+            isSelected: selected,
+            constraints: sizeConstraints,
+            onLongPress: onLongPressHandler,
+            onHover: onHoverHandler,
+            selectedIcon: selectedIconWidget,
+            onPressed: onPressed);
+      } else if (variant == "FilledTonalIconButton") {
+        button = IconButton.filledTonal(
+            autofocus: autofocus,
+            focusNode: _focusNode,
+            highlightColor: highlightColor,
+            disabledColor: disabledColor,
+            hoverColor: hoverColor,
+            enableFeedback: enableFeedback,
+            padding: padding,
+            alignment: alignment,
+            focusColor: focusColor,
+            splashColor: splashColor,
+            splashRadius: splashRadius,
+            icon: iconWidget,
+            iconSize: iconSize,
+            mouseCursor: mouseCursor,
+            style: style,
+            isSelected: selected,
+            constraints: sizeConstraints,
+            onLongPress: onLongPressHandler,
+            onHover: onHoverHandler,
+            selectedIcon: selectedIconWidget,
+            onPressed: onPressed);
+      } else if (variant == "OutlinedIconButton") {
+        button = IconButton.outlined(
             autofocus: autofocus,
             focusNode: _focusNode,
             highlightColor: highlightColor,
@@ -161,7 +205,6 @@ class _IconButtonControlState extends State<IconButtonControl>
             icon: iconWidget,
             iconSize: iconSize,
             mouseCursor: mouseCursor,
-            visualDensity: visualDensity,
             style: style,
             isSelected: selected,
             constraints: sizeConstraints,
@@ -170,16 +213,28 @@ class _IconButtonControlState extends State<IconButtonControl>
             selectedIcon: selectedIconWidget,
             onPressed: onPressed);
       } else {
-        return const ErrorControl(
-            "IconButton must have either icon or a visible content specified.");
-      }
-
-      if (bgcolor != null) {
-        button = Container(
-          decoration:
-              ShapeDecoration(color: bgcolor, shape: const CircleBorder()),
-          child: button,
-        );
+        button = IconButton(
+            autofocus: autofocus,
+            focusNode: _focusNode,
+            highlightColor: highlightColor,
+            disabledColor: disabledColor,
+            hoverColor: hoverColor,
+            enableFeedback: enableFeedback,
+            padding: padding,
+            alignment: alignment,
+            focusColor: focusColor,
+            splashColor: splashColor,
+            splashRadius: splashRadius,
+            icon: iconWidget,
+            iconSize: iconSize,
+            mouseCursor: mouseCursor,
+            style: style,
+            isSelected: selected,
+            constraints: sizeConstraints,
+            onLongPress: onLongPressHandler,
+            onHover: onHoverHandler,
+            selectedIcon: selectedIconWidget,
+            onPressed: onPressed);
       }
 
       return ConstrainedControl(control: widget.control, child: button);

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

@@ -47,17 +47,16 @@ class ListTileControl extends StatelessWidget with FletStoreMixin {
     var trailing = control.buildIconOrWidget("trailing");
     var onClick = control.getBool("on_click", false)!;
     var toggleInputs = control.getBool("toggle_inputs", false)!;
-    var url = control.getString("url");
-    var urlTarget = control.getString("url_target");
+    var url = control.getUrl("url");
 
     Function()? onPressed =
-        (onClick || toggleInputs || url != "") && !control.disabled
+        (onClick || toggleInputs || url != null) && !control.disabled
             ? () {
                 if (toggleInputs) {
                   _clickNotifier.onClick();
                 }
                 if (url != null) {
-                  openWebBrowser(url, webWindowName: urlTarget);
+                  openWebBrowser(url);
                 }
                 if (onClick) {
                   control.triggerEvent("click");

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

@@ -95,7 +95,7 @@ class MarkdownControl extends StatelessWidget {
         onTapText: () => control.triggerEvent("tap_text"),
         onTapLink: (String text, String? href, String title) {
           if (autoFollowLinks && href != null) {
-            openWebBrowser(href, webWindowName: autoFollowLinksTarget);
+            openWebBrowser(Url(href, autoFollowLinksTarget));
           }
           control.triggerEvent("tap_link", href);
         });

packages/flet/lib/src/flet_backend.dart

@@ -337,7 +337,7 @@ class FletBackend extends ChangeNotifier {
     debugPrint("Platform brightness updated: $newBrightness");
     platformBrightness = newBrightness;
     updateControl(page.id, {"platform_brightness": newBrightness.name});
-    triggerControlEvent(page, "platform_brightness_change");
+    triggerControlEvent(page, "platform_brightness_change", newBrightness.name);
     notifyListeners();
   }
 

packages/flet/lib/src/flet_core_extension.dart

@@ -196,6 +196,9 @@ class FletCoreExtension extends FletExtension {
       case "InteractiveViewer":
         return InteractiveViewerControl(key: key, control: control);
       case "IconButton":
+      case "FilledIconButton":
+      case "FilledTonalIconButton":
+      case "OutlinedIconButton":
         return IconButtonControl(key: key, control: control);
       case "CupertinoActivityIndicator":
         return CupertinoActivityIndicatorControl(key: key, control: control);