Controls Enhancement (#2882)

* initial commit

* Pass data to Control.__init__
Fixes #2826

* CircleAvatar: on_image_error

* Card: clip_behavior, is_semantic_container, show_border_on_foreground

* Checkbox: semantics_label, shape, splash_radius, border_side, is_error

* DragTarget: on_move, deprecated DragTargetAcceptEvent in favour of DragTargetEvent

* Draggable: on_drag_start, on_drag_end

* More types

* Divider: indent, end_indent

* Fix #2839

* Stack: alignment, fit

* Divider: rename indent to leading_indent and end_indent to trailing_indent

* Draggable: rename on_drag_end to on_drag_complete

* Checkbox: rename border_side to border

* Revert "Checkbox: rename border_side to border"

This reverts commit b92ce30.

* Card: variant

* VerticalDivider: leading_indent, trailing_indent

* Tooltip: exclude_from_semantics, enable_tap_to_dismiss

* Reformat _set_attr calls

* TimePicker: orientation

* FAB - dart: colors, elevation, enableFeedback

* ProgressRing: stroke_cap, stroke_align, semantics_label, semantics_value

* ProgressBar: border_radius, semantics_label, semantics_value

* OutlinedButton: clip_behavior

* NavBar: animation_duration

* AlertDialog: action_button_padding, clip_behavior, icon_padding, shadow_color, surface_tint_color

* ListTile: enable_feedback, horizontal_spacing, min_leading_width, min_vertical_padding, selected_color, selected_tile_color, splash_color, style

* Image: exclude_from_semantics, filter_quality, semantics_label

* SelectionArea: on_change

* ListView: semantic_child_count, clipBehavior

* FAB: colors, elevations, enable_feedback, clip_behavior

* ElevatedButton: clip_behavior,

* SnackBar: clip_behavior, shape, on_visible

* Slider: interaction, overlay_color

* IconButton: alignment, disabled_color, enable_feedback, hover_color, padding

* Radio: focus_color, hover_color, overlay_color, splash_radius, toggleable, visual_density

* GridView: semantic_child_count, clipBehavior

* Tabs: divider_height, enable_feedback, indicator_thickness

* Cleanup + Code Reformat

* Fix CI: import enum

* Reformat: replace is_dataclass with isinstance

* add kwargs in run_task

* Tabs: secondary

* Fix CI: typing error

* Option: alignment, on_click

* Dropdown: hint_content, icon_content, elevation, item_height, max_menu_height, icon_size, enable_feedback, padding, icon_enabled_color, icon_disabled_color, on_click

* Cleanup

* PopupMenuButton: clip_behavior, splash_radius, elevation, enable_feedback, icon_size, surface_tint_color, shadow_color, bgcolor, icon_color, shape, padding

* Dropdown: remove dense getter and setter

* PopupMenuItem: padding, height

* Page: locale_configuration

* Card: rename NORMAL to ELEVATED

* CircleAvatar: rename foreground_image_url and background_image_url to *_src

* UrlTarget enum

* PopupMenuButton: reintroduce on_cancelled, but as deprecated

* Reformat: created control.attrColor to ease color parsing

* ListView+GridView: cache_extent

* AppBar: elevation_on_scroll, shadow_color, surface_tint_color, clip_behavior, force_material_transparency, is_secondary, title_spacing, exclude_header_semantics

* Reformat: avoid spamming warnings

* TextField: fill_color, hover_color

* Dropdown: fill_color

* Fix failing CI: omitted parenthesis

* Locale: script_code

* Locale: rename used_locale to default_locale

* CupertinoBottomSheet default values

* CupertinoBottomSheet: check the type of content control

* Locale: rename default_locale to current_locale :)

* TimePicker.value: avoid splitting None

* AlertDialog: alignment, icon_color, scrollable, content_text_style,  title_text_style, actions_overflow_button_spacing,

* AppBar: toolbar_opacity, title_text_style, toolbar_text_style,shape

* parseMouseCursor: defaultMouseCursor

* Checkbox: visual_density, mouse_cursor

* Banner: content_text_style, margin, elevation, divider_color, shadow_color, surface_tint_color, on_visible

* CupertinoListTile: leading_size, leading_to_title

* Chip: surface_tint_color, color, click_elevation, clip_behavior, visual_density, border_side

* CupertinoRadio: toggleable, focus_color

* CupertinoSegmentedButton: click_color

* CupertinoSwitch: on_label_color, off_label_color

* Switch: hover_color, splash_radius, overlay_color, track_outline_color,mouse_cursor

* Snackbar: action_overflow_threshold

* Tabs: is_secondary, mouseCursor, clipBehavior

* Slider: mouse_cursor, secondary_track_value, secondary_active_color

* PopupMenuItem: mouse_cursor

* NavigationDrawerDestination: bgcolor

* NavigationDestination: bgcolor

* NavigationBar: overlay_color

* CupertinoTimerPicker: item_extent

* ExpansionTile: dense, enable_feedback, visual_density

* SearchBar: keyboard_type, view_surface_tint_color, autofocus

* NavigationRail: (un)selected_label_text_style | Destination: indicator_color, indicator_shape

* IconButton: mouse_cursor, visual_density

* Radio: mouse_cursor

* FAB: mouse_cursor

* DataTable: clip_behavior

* DatePicker: on_entry_mode_change

* ListTile: title_alignment, icon_color, text_color, shape, visual_density, mouse_cursor, title_text_style, subtitle_text_style, leading_and_trailing_text_style

* TimePicker: on_entry_mode_change

* Cleanup

* Fix failing CI concerning circular import

* Cleanup

* Remove None from enums

* Updated rive package version

* Added Rive to CI

---------

Co-authored-by: Feodor Fitsner <[email protected]>

Author: ndonkoHenri

.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)!;