v1: Remove surface_tint_color, update Colors and add some more tests (#5582)

* Refactor checkbox integration tests and update golden images

Renamed and replaced golden screenshot files for macOS checkbox tests to use a consistent naming scheme. Refactored test_checkbox.py to simplify screenshot assertions and update test logic to use new screenshot names and methods.

* Add labelTextStyle support to PopupMenuButton

Introduces labelTextStyle property for PopupMenuItem and updates PopupMenuButtonControl to apply labelTextStyle. Removes deprecated textStyle from PopupMenuTheme and updates documentation to reflect the new styling approach for menu item labels.

* Remove default shape logic from PopupMenuButtonControl

remove default value from shape for PopupMenuTheme.shape to have effect

* Refactor popup menu button integration test assets

Renamed and updated golden image files for the popup menu button tests to use 'basic' and 'basic_opened' naming. Updated the test to match new asset names and switched to function-scoped async fixtures for improved isolation.

* Add theme test for PopupMenuButton on macOS

Introduces a new integration test for PopupMenuButton with custom theme settings on macOS, including golden images for normal and opened states. This enhances coverage for themed appearance and behavior.

* updated PopupMenuTheme test

* SearchBar: removed default value for textCapitalization for theme to take effect

* Remove surface_tint_color from Material controls and themes

Eliminates the surface_tint_color property from various Material controls, styles, and theme classes in the Flet SDK. It is not recommended to use in Flutter: "This is not recommended for use. Material 3 spec introduced a set of tone-based surfaces and surface containers in its ColorScheme, which provide more flexibility. The intention is to eventually remove surface tint color from the framework."

* Remove surfaceTintColor support from controls and themes

Eliminated usage and parsing of the surfaceTintColor property from multiple controls and theme data files. This simplifies the codebase and removes support for a property that is no longer needed or relevant.

* Update ColorScheme to use surface_container_highest

Replaces usage of surface_variant with surface_container_highest in both Dart and Python implementations of ColorScheme. Removes background, on_background, and surface_variant properties from Python ColorScheme to align with updated theme structure.

* Add new Material 3 color scheme properties

Extended color handling in both Dart and Python to support new Material 3 color scheme properties such as primaryFixed, secondaryFixed, tertiaryFixed, and related variants. This improves theme compatibility and enables usage of the latest Material color system features.

* Update colors.py

---------

Co-authored-by: Feodor Fitsner <feodor@appveyor.com>

Author: InesaFitsner

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

@@ -75,8 +75,6 @@ class _AlertDialogControlState extends State<AlertDialogControl> {
           iconPadding: widget.control.getPadding("icon_padding"),
           backgroundColor: widget.control.getColor("bgcolor", context),
           buttonPadding: widget.control.getPadding("action_button_padding"),
-          surfaceTintColor:
-              widget.control.getColor("surface_tint_color", context),
           shadowColor: widget.control.getColor("shadow_color", context),
           elevation: widget.control.getDouble("elevation"),
           clipBehavior:

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

@@ -36,7 +36,6 @@ class AppBarControl extends StatelessWidget implements PreferredSizeWidget {
           .extension<SystemUiOverlayStyleTheme>()
           ?.systemUiOverlayStyle,
       shadowColor: control.getColor("shadow_color", context),
-      surfaceTintColor: control.getColor("surface_tint_color", context),
       scrolledUnderElevation: control.getDouble("elevation_on_scroll"),
       forceMaterialTransparency:
           control.getBool("force_material_transparency", false)!,

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

@@ -52,7 +52,6 @@ class _BannerControlState extends State<BannerControl> {
       backgroundColor: widget.control.getColor("bgcolor", context),
       contentTextStyle:
           widget.control.getTextStyle("content_text_style", Theme.of(context)),
-      surfaceTintColor: widget.control.getColor("surface_tint_color", context),
       shadowColor: widget.control.getColor("shadow_color", context),
       dividerColor: widget.control.getColor("divider_color", context),
       elevation: widget.control.getDouble("elevation"),

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

@@ -17,7 +17,6 @@ class BottomAppBarControl extends StatelessWidget {
       elevation: control.getDouble("elevation"),
       shape: control.getNotchedShape("shape", Theme.of(context)),
       shadowColor: control.getColor("shadow_color", context),
-      surfaceTintColor: control.getColor("surface_tint_color", context),
       color: control.getColor("bgcolor", context),
       notchMargin: control.getDouble("notch_margin", 4.0)!,
       child: control.buildWidget("content"),

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

@@ -36,7 +36,6 @@ class CardControl extends StatelessWidget {
         control.getBool("show_border_on_foreground", true)!;
     var bgcolor = control.getColor("bgcolor", context);
     var shadowColor = control.getColor("shadow_color", context);
-    var surfaceTintColor = control.getColor("surface_tint_color", context);
 
     Widget? card;
 
@@ -53,7 +52,6 @@ class CardControl extends StatelessWidget {
           clipBehavior: clipBehavior,
           color: bgcolor,
           shadowColor: shadowColor,
-          surfaceTintColor: surfaceTintColor,
           child: contentWidget);
     } else if (variant == CardVariant.filled) {
       card = Card.filled(
@@ -65,7 +63,6 @@ class CardControl extends StatelessWidget {
           clipBehavior: clipBehavior,
           color: bgcolor,
           shadowColor: shadowColor,
-          surfaceTintColor: surfaceTintColor,
           child: contentWidget);
     } else {
       card = Card(
@@ -77,7 +74,6 @@ class CardControl extends StatelessWidget {
           clipBehavior: clipBehavior,
           color: bgcolor,
           shadowColor: shadowColor,
-          surfaceTintColor: surfaceTintColor,
           child: contentWidget);
     }
 

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

@@ -8,10 +8,10 @@ import '../utils/box.dart';
 import '../utils/colors.dart';
 import '../utils/edge_insets.dart';
 import '../utils/misc.dart';
+import '../utils/mouse.dart';
 import '../utils/numbers.dart';
 import '../utils/text.dart';
 import '../utils/theme.dart';
-import '../utils/mouse.dart';
 import '../widgets/error.dart';
 import 'base_controls.dart';
 
@@ -97,7 +97,6 @@ class _ChipControlState extends State<ChipControl> {
       shadowColor: widget.control.getColor("shadow_color", context),
       shape: widget.control.getShape("shape", Theme.of(context)),
       color: widget.control.getWidgetStateColor("color", Theme.of(context)),
-      surfaceTintColor: widget.control.getColor("surface_tint_color", context),
       pressElevation: widget.control.getDouble("elevation_on_click"),
       side: widget.control.getBorderSide("border_side", Theme.of(context)),
       clipBehavior:

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

@@ -57,8 +57,6 @@ class _NavigationBarControlState extends State<NavigationBarControl>
           elevation: widget.control.getDouble("elevation"),
           labelPadding: widget.control.getPadding("label_padding"),
           shadowColor: widget.control.getColor("shadow_color", context),
-          surfaceTintColor:
-              widget.control.getColor("surface_tint_color", context),
           overlayColor: widget.control
               .getWidgetStateColor("overlay_color", Theme.of(context)),
           indicatorColor: widget.control.getColor("indicator_color", context),

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

@@ -51,7 +51,6 @@ class _NavigationDrawerControlState extends State<NavigationDrawerControl> {
       backgroundColor: widget.control.getColor("bgcolor", context),
       selectedIndex: _selectedIndex,
       shadowColor: widget.control.getColor("shadow_color", context),
-      surfaceTintColor: widget.control.getColor("surface_tint_color", context),
       tilePadding: parseEdgeInsets(widget.control.get("tile_padding"),
           const EdgeInsets.symmetric(horizontal: 12.0))!,
       onDestinationSelected: _destinationChanged,

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

@@ -1,3 +1,4 @@
+import 'package:flet/src/utils/text.dart';
 import 'package:flutter/material.dart';
 
 import '../extensions/control.dart';
@@ -31,18 +32,16 @@ class PopupMenuButtonControl extends StatelessWidget {
         iconSize: control.getDouble("icon_size"),
         splashRadius: control.getDouble("splash_radius"),
         shadowColor: control.getColor("shadow_color", context),
-        surfaceTintColor: control.getColor("surface_tint_color", context),
         iconColor: control.getColor("icon_color", context),
         elevation: control.getDouble("elevation"),
         enableFeedback: control.getBool("enable_feedback"),
         padding: control.getPadding("padding", const EdgeInsets.all(8))!,
         color: control.getColor("bgcolor", context),
         clipBehavior: control.getClipBehavior("clip_behavior", Clip.none)!,
-        shape: control.getShape("shape", Theme.of(context),
-            defaultValue: (Theme.of(context).useMaterial3
-                ? RoundedRectangleBorder(
-                    borderRadius: BorderRadius.circular(10))
-                : null))!,
+        shape: control.getShape(
+          "shape",
+          Theme.of(context),
+        ),
         constraints: control.getBoxConstraints("size_constraints"),
         style: control.getButtonStyle("style", Theme.of(context)),
         popUpAnimationStyle: control.getAnimationStyle("popup_animation_style"),
@@ -62,6 +61,8 @@ class PopupMenuButtonControl extends StatelessWidget {
               var itemContent = item.buildTextOrWidget("content");
               var itemIcon = item.buildIconOrWidget("icon");
               var mouseCursor = item.getMouseCursor("mouse_cursor");
+              var labelTextStyle = item.getWidgetStateTextStyle(
+                  "label_text_style", Theme.of(context));
 
               Widget? child;
               if (itemContent != null && itemIcon == null) {
@@ -84,13 +85,15 @@ class PopupMenuButtonControl extends StatelessWidget {
                       padding: padding,
                       enabled: !item.disabled,
                       mouseCursor: mouseCursor,
+                      labelTextStyle: labelTextStyle,
                       onTap: () => item.triggerEvent("click", !checked),
                       child: child,
                     )
                   : PopupMenuItem<String>(
                       value: item.id.toString(),
                       height: height,
                       padding: padding,
+                      labelTextStyle: labelTextStyle,
                       enabled: !item.disabled,
                       mouseCursor: mouseCursor,
                       onTap: () {

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

@@ -23,8 +23,9 @@ class SearchBarControl extends StatefulWidget {
 
 class _SearchBarControlState extends State<SearchBarControl> {
   late final SearchController _controller;
+
   bool _focused = false;
-  TextCapitalization _textCapitalization = TextCapitalization.none;
+  TextCapitalization? _textCapitalization;
   late final FocusNode _focusNode;
   String? _lastFocusValue;
   String? _lastBlurValue;
@@ -57,8 +58,6 @@ class _SearchBarControlState extends State<SearchBarControl> {
   }
 
   void _searchTextChanged() {
-    _textCapitalization = parseTextCapitalization(
-        widget.control.getString("capitalization"), TextCapitalization.none)!;
     _updateValue(_controller.text);
   }
 
@@ -126,6 +125,8 @@ class _SearchBarControlState extends State<SearchBarControl> {
       /// No change.
       case TextCapitalization.none:
         return text;
+      case null:
+        return text;
     }
   }
 
@@ -159,6 +160,10 @@ class _SearchBarControlState extends State<SearchBarControl> {
 
     var theme = Theme.of(context);
 
+    _textCapitalization = parseTextCapitalization(
+        widget.control.getString("capitalization"),
+        theme.searchBarTheme.textCapitalization);
+
     Widget anchor = SearchAnchor(
         searchController: _controller,
         headerHintStyle:
@@ -189,8 +194,6 @@ class _SearchBarControlState extends State<SearchBarControl> {
                 widget.control.triggerEvent("change", value);
               }
             : null,
-        viewSurfaceTintColor:
-            widget.control.getColor("view_surface_tint_color", context),
         textCapitalization: _textCapitalization,
         keyboardType: keyboardType,
         builder: (BuildContext context, SearchController controller) {
@@ -211,8 +214,6 @@ class _SearchBarControlState extends State<SearchBarControl> {
                 .getWidgetStateTextStyle("bar_hint_text_style", theme),
             shadowColor:
                 widget.control.getWidgetStateColor("bar_shadow_color", theme),
-            surfaceTintColor: widget.control
-                .getWidgetStateColor("bar_surface_tint_color", theme),
             side: widget.control
                 .getWidgetStateBorderSide("bar_border_side", theme),
             backgroundColor: