Controls Enhancement

.appveyor.yml

@@ -122,6 +122,7 @@ for:
             python3 ci/patch_pubspec.py packages/flet_audio/pubspec.yaml $PKG_VER
             python3 ci/patch_pubspec.py packages/flet_audio_recorder/pubspec.yaml $PKG_VER
             python3 ci/patch_pubspec.py packages/flet_lottie/pubspec.yaml $PKG_VER
+            python3 ci/patch_pubspec.py packages/flet_rive/pubspec.yaml $PKG_VER
             python3 ci/patch_pubspec.py packages/flet_video/pubspec.yaml $PKG_VER
             python3 ci/patch_pubspec.py packages/flet_webview/pubspec.yaml $PKG_VER
 
@@ -142,6 +143,10 @@ for:
             dart pub publish --force || exit 1
             cd $APPVEYOR_BUILD_FOLDER
 
+            cd packages/flet_rive
+            dart pub publish --force || exit 1
+            cd $APPVEYOR_BUILD_FOLDER
+
             cd packages/flet_video
             dart pub publish --force || exit 1
             cd $APPVEYOR_BUILD_FOLDER
@@ -169,6 +174,10 @@ for:
             dart pub publish --dry-run
             cd $APPVEYOR_BUILD_FOLDER
 
+            cd packages/flet_rive
+            dart pub publish --dry-run
+            cd $APPVEYOR_BUILD_FOLDER
+
             cd packages/flet_video
             dart pub publish --dry-run
             cd $APPVEYOR_BUILD_FOLDER

client/pubspec.lock

@@ -300,6 +300,11 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  flutter_localizations:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   flutter_markdown:
     dependency: transitive
     description:
@@ -392,6 +397,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  intl:
+    dependency: transitive
+    description:
+      name: intl
+      sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.18.1"
   js:
     dependency: transitive
     description:

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

@@ -4,8 +4,8 @@ import '../flet_control_backend.dart';
 import '../models/control.dart';
 import '../utils/alignment.dart';
 import '../utils/borders.dart';
-import '../utils/colors.dart';
 import '../utils/edge_insets.dart';
+import '../utils/text.dart';
 import 'create_control.dart';
 import 'cupertino_alert_dialog.dart';
 import 'error.dart';
@@ -49,10 +49,15 @@ class _AlertDialogControlState extends State<AlertDialogControl>
     var actionCtrls =
         widget.children.where((c) => c.name == "action" && c.isVisible);
     final actionsAlignment = parseMainAxisAlignment(
-        widget.control, "actionsAlignment", MainAxisAlignment.start);
+        widget.control, "actionsAlignment", MainAxisAlignment.end);
     if (titleCtrls.isEmpty && contentCtrls.isEmpty && actionCtrls.isEmpty) {
       return const ErrorControl("AlertDialog does not have any content.");
     }
+    var clipBehavior = Clip.values.firstWhere(
+        (e) =>
+            e.name.toLowerCase() ==
+            widget.control.attrString("clipBehavior", "")!.toLowerCase(),
+        orElse: () => Clip.none);
 
     return AlertDialog(
       title: titleCtrls.isNotEmpty
@@ -76,13 +81,26 @@ class _AlertDialogControlState extends State<AlertDialogControl>
       semanticLabel: widget.control.attrString("semanticsLabel"),
       insetPadding: parseEdgeInsets(widget.control, "insetPadding") ??
           const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
-      backgroundColor: HexColor.fromString(
-          Theme.of(context), widget.control.attrString("bgcolor", "")!),
+      iconPadding: parseEdgeInsets(widget.control, "iconPadding"),
+      backgroundColor: widget.control.attrColor("bgcolor", context),
+      buttonPadding: parseEdgeInsets(widget.control, "actionButtonPadding"),
+      surfaceTintColor: widget.control.attrColor("surfaceTintColor", context),
+      shadowColor: widget.control.attrColor("shadowColor", context),
       elevation: widget.control.attrDouble("elevation"),
+      clipBehavior: clipBehavior,
       icon: iconCtrls.isNotEmpty
           ? createControl(widget.control, iconCtrls.first.id, disabled,
               parentAdaptive: adaptive)
           : null,
+      iconColor: widget.control.attrColor("iconColor", context),
+      scrollable: widget.control.attrBool("scrollable", false)!,
+      actionsOverflowButtonSpacing:
+          widget.control.attrDouble("actionsOverflowButtonSpacing"),
+      alignment: parseAlignment(widget.control, "alignment"),
+      contentTextStyle:
+          parseTextStyle(Theme.of(context), widget.control, "contentTextStyle"),
+      titleTextStyle:
+          parseTextStyle(Theme.of(context), widget.control, "titleTextStyle"),
     );
   }
 

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

@@ -1,7 +1,9 @@
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 
 import '../models/control.dart';
-import '../utils/colors.dart';
+import '../utils/borders.dart';
+import '../utils/text.dart';
 import '../utils/theme.dart';
 import 'create_control.dart';
 import 'cupertino_app_bar.dart';
@@ -50,13 +52,27 @@ class AppBarControl extends StatelessWidget
 
       var leadingWidth = control.attrDouble("leadingWidth");
       var elevation = control.attrDouble("elevation");
+      var toolbarOpacity = control.attrDouble("toolbarOpacity", 1)!;
       var centerTitle = control.attrBool("centerTitle", false)!;
       var automaticallyImplyLeading =
           control.attrBool("automaticallyImplyLeading", true)!;
-      var color = HexColor.fromString(
-          Theme.of(context), control.attrString("color", "")!);
-      var bgcolor = HexColor.fromString(
-          Theme.of(context), control.attrString("bgcolor", "")!);
+      var color = control.attrColor("color", context);
+      var bgcolor = control.attrColor("bgcolor", context);
+      var shadowColor = control.attrColor("shadowColor", context);
+      var surfaceTintColor = control.attrColor("surfaceTintColor", context);
+      var elevationOnScroll = control.attrDouble("elevationOnScroll");
+      var forceMaterialTransparency =
+          control.attrBool("forceMaterialTransparency", false)!;
+      var isSecondary = control.attrBool("isSecondary", false)!;
+      var excludeHeaderSemantics =
+          control.attrBool("excludeHeaderSemantics", false)!;
+      var titleSpacing = control.attrDouble("titleSpacing");
+
+      var clipBehavior = Clip.values.firstWhereOrNull(
+        (e) =>
+            e.name.toLowerCase() ==
+            control.attrString("clipBehavior", "")!.toLowerCase(),
+      );
 
       return AppBar(
         leading: leadingCtrls.isNotEmpty
@@ -81,6 +97,20 @@ class AppBarControl extends StatelessWidget
         systemOverlayStyle: Theme.of(context)
             .extension<SystemUiOverlayStyleTheme>()
             ?.systemUiOverlayStyle,
+        shadowColor: shadowColor,
+        surfaceTintColor: surfaceTintColor,
+        scrolledUnderElevation: elevationOnScroll,
+        forceMaterialTransparency: forceMaterialTransparency,
+        primary: !isSecondary,
+        titleSpacing: titleSpacing,
+        excludeHeaderSemantics: excludeHeaderSemantics,
+        clipBehavior: clipBehavior,
+        titleTextStyle:
+            parseTextStyle(Theme.of(context), control, "titleTextStyle"),
+        shape: parseOutlinedBorder(control, "shape"),
+        toolbarOpacity: toolbarOpacity,
+        toolbarTextStyle:
+            parseTextStyle(Theme.of(context), control, "toolbarTextStyle"),
       );
     });
   }

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

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 
 import '../models/control.dart';
 import '../utils/alignment.dart';
-import '../utils/colors.dart';
 import '../utils/edge_insets.dart';
 import '../utils/text.dart';
 import '../utils/transforms.dart';
@@ -40,11 +39,9 @@ class BadgeControl extends StatelessWidget {
 
     var offsetDetails = parseOffset(control, "offset");
 
-    var bgColor = HexColor.fromString(
-        Theme.of(context), control.attrString("bgColor", "")!);
+    var bgColor = control.attrColor("bgcolor", context);
 
-    var textColor = HexColor.fromString(
-        Theme.of(context), control.attrString("textColor", "")!);
+    var textColor = control.attrColor("textColor", context);
 
     bool isLabelVisible = control.attrBool("isLabelVisible", true)!;
     var largeSize = control.attrDouble("largeSize");

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

@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
 
+import '../flet_control_backend.dart';
 import '../models/control.dart';
-import '../utils/colors.dart';
 import '../utils/edge_insets.dart';
+import '../utils/text.dart';
 import 'create_control.dart';
 import 'error.dart';
 
@@ -13,6 +14,7 @@ class BannerControl extends StatefulWidget {
   final bool parentDisabled;
   final bool? parentAdaptive;
   final Widget? nextChild;
+  final FletControlBackend backend;
 
   const BannerControl(
       {super.key,
@@ -21,7 +23,8 @@ class BannerControl extends StatefulWidget {
       required this.children,
       required this.parentDisabled,
       required this.parentAdaptive,
-      required this.nextChild});
+      required this.nextChild,
+      required this.backend});
 
   @override
   State<BannerControl> createState() => _BannerControlState();
@@ -59,8 +62,17 @@ class _BannerControlState extends State<BannerControl> {
               parentAdaptive: widget.parentAdaptive))
           .toList(),
       forceActionsBelow: widget.control.attrBool("forceActionsBelow", false)!,
-      backgroundColor: HexColor.fromString(
-          Theme.of(context), widget.control.attrString("bgcolor", "")!),
+      backgroundColor: widget.control.attrColor("bgcolor", context),
+      contentTextStyle:
+          parseTextStyle(Theme.of(context), widget.control, "contentTextStyle"),
+      surfaceTintColor: widget.control.attrColor("surfaceTintColor", context),
+      shadowColor: widget.control.attrColor("shadowColor", context),
+      dividerColor: widget.control.attrColor("dividerColor", context),
+      elevation: widget.control.attrDouble("elevation"),
+      margin: parseEdgeInsets(widget.control, "margin"),
+      onVisible: () {
+        widget.backend.triggerControlEvent(widget.control.id, "visible");
+      },
     );
   }
 

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

@@ -13,7 +13,6 @@ import '../models/control.dart';
 import '../utils/animations.dart';
 import '../utils/borders.dart';
 import '../utils/charts.dart';
-import '../utils/colors.dart';
 import '../utils/gradient.dart';
 import '../utils/text.dart';
 import 'charts.dart';
@@ -205,8 +204,7 @@ class _BarChartControlState extends State<BarChartControl> {
 
           var chart = BarChart(
             BarChartData(
-              backgroundColor: HexColor.fromString(
-                  Theme.of(context), widget.control.attrString("bgcolor", "")!),
+              backgroundColor: widget.control.attrColor("bgcolor", context),
               minY: widget.control.attrDouble("miny"),
               maxY: widget.control.attrDouble("maxy"),
               baselineY: widget.control.attrDouble("baseliney"),
@@ -231,8 +229,8 @@ class _BarChartControlState extends State<BarChartControl> {
               barTouchData: BarTouchData(
                 enabled: interactive,
                 touchTooltipData: BarTouchTooltipData(
-                  tooltipBgColor: HexColor.fromString(Theme.of(context),
-                      widget.control.attrString("tooltipBgcolor", "")!),
+                  tooltipBgColor:
+                      widget.control.attrColor("tooltipBgColor", context),
                   getTooltipItem: (group, groupIndex, rod, rodIndex) {
                     var dp = viewModel.barGroups[groupIndex].barRods[rodIndex];
 
@@ -333,16 +331,14 @@ class _BarChartControlState extends State<BarChartControl> {
       bool interactiveChart, BarChartRodViewModel rodViewModel) {
     var bgFromY = rodViewModel.control.attrDouble("bgFromY");
     var bgToY = rodViewModel.control.attrDouble("bgToY");
-    var bgColor = HexColor.fromString(
-        theme, rodViewModel.control.attrString("bgColor", "")!);
+    var bgColor = rodViewModel.control.attrColor("bgColor", context);
     var bgGradient = parseGradient(theme, rodViewModel.control, "bgGradient");
 
     return BarChartRodData(
         fromY: rodViewModel.control.attrDouble("fromY"),
         toY: rodViewModel.control.attrDouble("toY", 0)!,
         width: rodViewModel.control.attrDouble("width"),
-        color: HexColor.fromString(
-            theme, rodViewModel.control.attrString("color", "")!),
+        color: rodViewModel.control.attrColor("color", context),
         gradient: parseGradient(theme, rodViewModel.control, "gradient"),
         borderRadius: parseBorderRadius(rodViewModel.control, "borderRadius"),
         borderSide:
@@ -370,8 +366,7 @@ class _BarChartControlState extends State<BarChartControl> {
     return BarChartRodStackItem(
         stackItemViewModel.control.attrDouble("fromY")!,
         stackItemViewModel.control.attrDouble("toY", 0)!,
-        HexColor.fromString(
-            theme, stackItemViewModel.control.attrString("color", "")!)!,
+        stackItemViewModel.control.attrColor("color", context)!,
         parseBorderSide(theme, stackItemViewModel.control, "borderSide") ??
             BorderSide.none);
   }

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

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 
 import '../models/control.dart';
-import '../utils/colors.dart';
 import '../utils/edge_insets.dart';
 import 'create_control.dart';
 import 'error.dart';
@@ -65,12 +64,9 @@ class _BottomAppBarControlState extends State<BottomAppBarControl>
         height: widget.control.attrDouble("height"),
         elevation: elevation,
         shape: shape,
-        shadowColor: HexColor.fromString(
-            Theme.of(context), widget.control.attrString("shadowColor", "")!),
-        surfaceTintColor: HexColor.fromString(Theme.of(context),
-            widget.control.attrString("surfaceTintColor", "")!),
-        color: HexColor.fromString(
-            Theme.of(context), widget.control.attrString("bgColor", "")!),
+        shadowColor: widget.control.attrColor("shadowColor", context),
+        surfaceTintColor: widget.control.attrColor("surfaceTintColor", context),
+        color: widget.control.attrColor("bgColor", context),
         notchMargin: widget.control.attrDouble("notchMargin", 4.0)!,
         child: contentCtrls.isNotEmpty
             ? createControl(widget.control, contentCtrls.first.id, disabled,

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

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 
 import '../flet_control_backend.dart';
 import '../models/control.dart';
-import '../utils/colors.dart';
 import 'create_control.dart';
 import 'error.dart';
 
@@ -89,8 +88,7 @@ class _BottomSheetControlState extends State<BottomSheetControl> {
                   return content;
                 },
                 isDismissible: dismissible,
-                backgroundColor: HexColor.fromString(Theme.of(context),
-                    widget.control.attrString("bgColor", "")!),
+                backgroundColor: widget.control.attrColor("bgColor", context),
                 elevation: widget.control.attrDouble("elevation"),
                 isScrollControlled: isScrollControlled,
                 enableDrag: enableDrag,

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

@@ -13,7 +13,6 @@ import '../models/control.dart';
 import '../models/control_tree_view_model.dart';
 import '../utils/alignment.dart';
 import '../utils/borders.dart';
-import '../utils/colors.dart';
 import '../utils/dash_path.dart';
 import '../utils/drawing.dart';
 import '../utils/numbers.dart';
@@ -232,9 +231,7 @@ class FletCustomPainter extends CustomPainter {
   }
 
   void drawColor(Canvas canvas, ControlTreeViewModel shape) {
-    var color =
-        HexColor.fromString(theme, shape.control.attrString("color", "")!) ??
-            Colors.black;
+    var color = shape.control.attrColor("color", context) ?? Colors.black;
     var blendMode = BlendMode.values.firstWhere(
         (e) =>
             e.name.toLowerCase() ==
@@ -333,9 +330,7 @@ class FletCustomPainter extends CustomPainter {
 
   void drawShadow(Canvas canvas, ControlTreeViewModel shape) {
     var path = buildPath(json.decode(shape.control.attrString("path", "[]")!));
-    var color =
-        HexColor.fromString(theme, shape.control.attrString("color", "")!) ??
-            Colors.black;
+    var color = shape.control.attrColor("color", context) ?? Colors.black;
     var elevation = shape.control.attrDouble("elevation", 0)!;
     var transparentOccluder =
         shape.control.attrBool("transparentOccluder", false)!;