V1: More integration tests for themes and controls (#5632)

* Refactor DataTable decoration and update tests

Improved DataTable decoration handling in datatable.dart by using type-safe casting and fallback logic. Updated integration tests to use per-test app instances, added a new themed DataTable test, and replaced golden images for macOS DataTable screenshots.

* Refactor theme color handling and update docs

Simplified theme color logic in Dart by removing primarySwatch and related properties. Updated Python Theme dataclass to remove primary_swatch and added documentation for color_scheme_seed.

* Update theme color scheme handling and docs

Refactored Dart theme parsing to use a local colorScheme variable and set shadowColor from colorScheme. Improved Python Theme class documentation for color_scheme and chip_theme, and removed unused color attributes.

* Improve divider theme handling in theme parsing

Refactored Dart theme parsing to use DividerThemeData for divider color and theme assignment. Added docstrings to Python Theme class for divider_theme, clarifying its usage and affected widgets.

* Add Divider theme support and update tests

Updated integration tests for Divider and DataTable to cover theme properties and added new golden images for Divider tests. Also removed unused divider_color from Theme.

* Add default text to dropdown in test

Set the 'text' property to 'Select a color' for the dropdown in the test_dropdown.py integration test. Updated golden images to reflect this UI change.

* Refactor dropdown integration tests and add golden images

Updated dropdown integration tests to use function-scoped async fixtures and split basic and theme tests. Added new golden images for macOS dropdown control states. Also removed redundant screenshot enabling in data table and divider tests.

* Enhance Dropdown menu style customization

Added support for specifying a custom MenuStyle for Dropdown controls, allowing configuration of background color, elevation, and width. Updated theme parsing to use 'dropdown_theme' for DropdownMenuTheme. Adjusted integration test golden images to reflect new styling options. Improved documentation for menu_style in Python Dropdown and DropdownTheme classes.

* Fixed integration tests: Remove tester service from page initialization

Eliminated appending the Tester service to the page's services list in FletTestApp. This may be part of a refactor or cleanup to simplify test app setup.

* Add button theme integration test and docstring

Introduces an integration test for button theme customization, including a golden image for macOS. Also adds a docstring to the Theme.button_theme property to clarify its purpose.

* Enable text_style in button theme test

Uncommented the text_style property in the button theme integration test and updated the golden image to reflect the new button appearance.

* Add outlined button theme integration test and docstring

Introduces an integration test for OutlinedButton theme, including a golden image for macOS. Also adds a docstring to the outlined_button_theme property in Theme to clarify its purpose.

* Add TextButton theme integration test and docstring

Introduced a new integration test for TextButton theme, including a golden image for macOS. Added a docstring to the Theme class for text_button_theme to clarify its purpose. Minor comment update in button theme test for color usage.

* Add FilledButton theme integration test and docstring

Introduces an integration test for FilledButton theme customization, including a golden image for macOS. Also adds a docstring to the filled_button_theme property in Theme to clarify its purpose.

* Add IconButton theme support and integration test

Introduces icon_button_theme to the Theme class for customizing IconButton appearance. Adds an integration test and golden image to verify IconButton theming on macOS.

* Update ExpansionTile tests and theme documentation

Renamed and added new golden images for ExpansionTile tests on macOS, updated test function names and added a new test for ExpansionTile properties. Also improved documentation for expansion_tile_theme in Theme class.

* Update ExpansionTile properties and golden image

Commented out the 'leading' icon, changed 'affinity' from TRAILING to LEADING, and updated the corresponding golden image for the ExpansionTile properties test on macOS.

* Update ExpansionTile integration tests and screenshots

Replaces the properties1.png screenshot with closed.png and expanded.png for macOS golden images. Refactors test_expansion_tile.py to use per-test flet_app instances, removes the properties1 test, and adds a new expanded state test with updated screenshot logic.

* Add ExpansionTile theme tests and update screenshot names

Renamed 'closed' screenshot to 'collapsed' in ExpansionTile tests for consistency. Added new integration tests and golden images for ExpansionTileTheme on macOS, including both collapsed and expanded states. Fixed clipBehavior parsing in ExpansionTileControl.

* Comment out text_style in button theme tests

The text_style property was commented out in button theme integration tests, due to issue #5620. Corresponding golden images were updated to reflect this change.

* Add tests and docs for FloatingActionButton location

Added new integration tests for FloatingActionButton with center top and end top locations, including corresponding golden images. Improved documentation for floating_action_button_theme in Theme to clarify its purpose. Renamed basic screenshot for consistency.

* Add FloatingActionButton property tests and golden images

Introduces new integration tests for FloatingActionButton properties, including visual states for elevation, focus, and disabled. Adds corresponding golden images for macOS to validate screenshot outputs.

* Add hover state test for FloatingActionButton

Introduced a new integration test to verify the hover state of FloatingActionButton on macOS, including screenshot comparison. Additional properties related to hover and feedback were set for more comprehensive coverage.

* Refactor FloatingActionButtonTheme property names

Renamed 'extended_text_style' to 'text_style' and 'extended_icon_label_spacing' to 'icon_label_spacing' in both Dart and Python implementations for consistency. Updated related documentation and integration tests, and added golden images for macOS FloatingActionButton theme states.

* Refactor ListTile tests and update golden images

Renamed and expanded ListTile integration tests for better coverage, including new tests for selected, focus, hover, and disabled states. Updated and added corresponding golden images for macOS. Improved docstrings in FloatingActionButtonTheme and Theme to clarify icon and content terminology and added missing docstrings for theme properties.

* Enhance ListTile integration tests on macOS

Expanded ListTile property coverage in integration tests by adding cases for custom shapes, dense tiles, and content padding. Updated golden images to reflect new test scenarios and improved property combinations for more comprehensive visual validation.

* Refactor ListTile splash color property

Replaced 'bgcolor_activated' with 'splash_color' in ListTile control for both Dart and Python implementations to improve clarity and consistency. Updated integration tests to cover additional ListTile properties and added new golden images for toggle input scenarios.

* Refactor ListTile integration tests and update golden files

Split the ListTile properties test into two separate tests, moving several property checks to a new test_properties2 and updating screenshot references to properties_3_normal and properties_3_hover. Added a new golden image and renamed existing ones to match the new test structure.

* Update ListTile hover behavior and golden images

Refactored ListTile hover color documentation to clarify it only applies when `toggle_inputs` is True. Updated and replaced golden test images for macOS ListTile to reflect new toggle input states and removed obsolete images.

* updated tests

* Refactor ListTile optional properties and theme key

Changed several ListTile properties in Python and Dart from default values to Optional types to allow for unset states. Renamed 'min_tile_height' to 'min_height' in ListTileTheme for consistency, and updated related parsing logic in Dart.

* Add ListTile theme integration test and golden image

Introduces a new integration test for ListTile theme customization in Flet, including a golden screenshot for macOS. The test verifies various theme properties and ListTile configurations to ensure correct rendering.

---------

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

Author: InesaFitsner

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

@@ -29,23 +29,24 @@ class DataTableControl extends StatelessWidget {
     var gradient = control.getGradient("gradient", theme);
     var horizontalLines = control.getBorderSide("horizontal_lLines", theme);
     var verticalLines = control.getBorderSide("vertical_lines", theme);
-    var defaultDecoration =
-        theme.dataTableTheme.decoration ?? const BoxDecoration();
+    var defaultDecoration = theme.dataTableTheme.decoration as BoxDecoration? ??
+        const BoxDecoration();
 
     BoxDecoration? decoration;
+
     if (bgcolor != null ||
         border != null ||
         borderRadius != null ||
         gradient != null) {
-      decoration = (defaultDecoration as BoxDecoration).copyWith(
+      decoration = defaultDecoration.copyWith(
           color: parseColor(bgcolor, theme),
           border: border,
           borderRadius: borderRadius,
           gradient: gradient);
     }
 
     var datatable = DataTable(
-      decoration: decoration,
+      decoration: decoration ?? defaultDecoration,
       border: (horizontalLines != null || verticalLines != null)
           ? TableBorder(
               horizontalInside: horizontalLines ?? BorderSide.none,

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

@@ -81,7 +81,9 @@ class _DropdownControlState extends State<DropdownControl> {
         widget.control.getColor("focused_border_color", context);
     var borderWidth = widget.control.getDouble("border_width");
     var focusedBorderWidth = widget.control.getDouble("focused_border_width");
-    var menuWidth = widget.control.getDouble("menu_width", double.infinity)!;
+    var menuWidth = widget.control.getDouble("menu_width");
+    var bgColor = widget.control.getWidgetStateColor("bgcolor", theme);
+    var elevation = widget.control.getWidgetStateDouble("elevation");
 
     FormFieldInputBorder inputBorder = widget.control
         .getFormFieldInputBorder("border", FormFieldInputBorder.outline)!;
@@ -148,8 +150,30 @@ class _DropdownControlState extends State<DropdownControl> {
 
     TextStyle? textStyle = widget.control.getTextStyle("text_style", theme);
     if (textSize != null || color != null) {
-      textStyle = (textStyle ?? const TextStyle()).copyWith(
-          fontSize: textSize, color: color ?? theme.colorScheme.onSurface);
+      textStyle =
+          (textStyle ?? theme.dropdownMenuTheme.textStyle ?? const TextStyle())
+              .copyWith(
+                  fontSize: textSize,
+                  color: color ?? theme.colorScheme.onSurface);
+    }
+
+    MenuStyle? menuStyle = widget.control.getMenuStyle("menu_style", theme);
+    if (bgColor != null || elevation != null || menuWidth != null) {
+      menuStyle =
+          (menuStyle ?? theme.dropdownMenuTheme.menuStyle ?? const MenuStyle())
+              .copyWith(
+                  backgroundColor: bgColor,
+                  elevation: elevation,
+                  fixedSize: WidgetStateProperty.all(
+                      Size.fromWidth(menuWidth ?? double.infinity)));
+    }
+
+    if (textSize != null || color != null) {
+      textStyle =
+          (textStyle ?? theme.dropdownMenuTheme.textStyle ?? const TextStyle())
+              .copyWith(
+                  fontSize: textSize,
+                  color: color ?? theme.colorScheme.onSurface);
     }
 
     var items = widget.control
@@ -213,11 +237,12 @@ class _DropdownControlState extends State<DropdownControl> {
       errorText: widget.control.getString("error_text"),
       hintText: widget.control.getString("hint_text"),
       helperText: widget.control.getString("helper_text"),
-      menuStyle: MenuStyle(
-        backgroundColor: widget.control.getWidgetStateColor("bgcolor", theme),
-        elevation: widget.control.getWidgetStateDouble("elevation"),
-        fixedSize: WidgetStateProperty.all(Size.fromWidth(menuWidth)),
-      ),
+      // menuStyle: MenuStyle(
+      //   backgroundColor: widget.control.getWidgetStateColor("bgcolor", theme),
+      //   elevation: widget.control.getWidgetStateDouble("elevation"),
+      //   fixedSize: WidgetStateProperty.all(Size.fromWidth(menuWidth)),
+      // ),
+      menuStyle: menuStyle,
       inputDecorationTheme: inputDecorationTheme,
       onSelected: widget.control.disabled
           ? null

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

@@ -52,8 +52,7 @@ class ExpansionTileControl extends StatelessWidget {
 
     var affinity = control.getListTileControlAffinity(
         "affinity", ListTileControlAffinity.platform)!;
-    var clipBehavior =
-        parseClip(control.getString("clip_behavior"), Clip.none)!;
+    var clipBehavior = parseClip(control.getString("clip_behavior"));
 
     var expandedCrossAxisAlignment = control.getCrossAxisAlignment(
         "expanded_cross_axis_alignment", CrossAxisAlignment.center)!;

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

@@ -74,9 +74,9 @@ class ListTileControl extends StatelessWidget with FletStoreMixin {
     Widget tile = ListTile(
       autofocus: control.getBool("autofocus", false)!,
       contentPadding: control.getPadding("content_padding"),
-      isThreeLine: control.getBool("is_three_line", false)!,
+      isThreeLine: control.getBool("is_three_line"),
       selected: control.getBool("selected", false)!,
-      dense: control.getBool("dense", false)!,
+      dense: control.getBool("dense"),
       onTap: onPressed,
       onLongPress: onLongPress,
       enabled: !control.disabled,
@@ -89,7 +89,7 @@ class ListTileControl extends StatelessWidget with FletStoreMixin {
       selectedColor: control.getColor("selected_color", context),
       focusColor: control.getColor("focus_color", context),
       tileColor: control.getColor("bgcolor", context),
-      splashColor: control.getColor("bgcolor_activated", context),
+      splashColor: control.getColor("splash_color", context),
       hoverColor: control.getColor("hover_color", context),
       iconColor: control.getColor("icon_color", context),
       textColor: control.getColor("text_color", context),

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

@@ -94,25 +94,21 @@ ThemeData parseTheme(
     {ThemeData? parentTheme}) {
   ThemeData? theme = parentTheme;
 
-  var primarySwatch = parseColor(value?["primary_swatch"], theme);
-  var colorSchemeSeed = parseColor(value?["color_scheme_seed"], theme);
-
-  if (colorSchemeSeed != null) primarySwatch = null;
-
-  if (colorSchemeSeed == null && primarySwatch == null) {
-    colorSchemeSeed = Colors.blue;
-  }
+  var colorSchemeSeed =
+      parseColor(value?["color_scheme_seed"], theme) ?? Colors.blue;
 
   // create new theme
   theme ??= ThemeData(
-    primarySwatch:
-        primarySwatch != null ? primarySwatch as MaterialColor : null,
     colorSchemeSeed: colorSchemeSeed,
     fontFamily: value?["font_family"],
     brightness: brightness,
-    useMaterial3: value?["use_material3"] ?? primarySwatch == null,
+    useMaterial3: value?["use_material3"],
   );
 
+  ColorScheme? colorScheme = parseColorScheme(value?["color_scheme"], theme);
+  DividerThemeData? dividerTheme =
+      parseDividerTheme(value?["divider_theme"], theme);
+
   theme = theme.copyWith(
     extensions: {
       SystemUiOverlayStyleTheme(value?["system_overlay_style"] != null
@@ -124,7 +120,7 @@ ThemeData parseTheme(
         parseVisualDensity(value?["visual_density"], theme.visualDensity)!,
     pageTransitionsTheme: parsePageTransitions(
         value?["page_transitions"], theme.pageTransitionsTheme)!,
-    colorScheme: parseColorScheme(value?["color_scheme"], theme),
+    colorScheme: colorScheme,
     textTheme: parseTextTheme(value?["text_theme"], theme, theme.textTheme),
     primaryTextTheme: parseTextTheme(
         value?["primary_text_theme"], theme, theme.primaryTextTheme),
@@ -140,13 +136,10 @@ ThemeData parseTheme(
     canvasColor: parseColor(value?["canvas_color"], theme),
     scaffoldBackgroundColor: parseColor(value?["scaffold_bgcolor"], theme),
     cardColor: parseColor(value?["card_bgcolor"], theme),
-    dividerColor: parseColor(value?["divider_color"], theme),
+    dividerColor: dividerTheme?.color,
     hintColor: parseColor(value?["hint_color"], theme),
-    shadowColor: parseColor(value?["shadow_color"], theme),
+    shadowColor: colorScheme?.shadow,
     secondaryHeaderColor: parseColor(value?["secondary_header_color"], theme),
-    primaryColor: parseColor(value?["primary_color"], theme),
-    primaryColorLight: parseColor(value?["primary_color_light"], theme),
-    primaryColorDark: parseColor(value?["primary_color_dark"], theme),
     dialogTheme: parseDialogTheme(value?["dialog_theme"], theme),
     bottomSheetTheme:
         parseBottomSheetTheme(value?["bottom_sheet_theme"], theme),
@@ -160,15 +153,14 @@ ThemeData parseTheme(
     radioTheme: parseRadioTheme(value?["radio_theme"], theme),
     badgeTheme: parseBadgeTheme(value?["badge_theme"], theme),
     switchTheme: parseSwitchTheme(value?["switch_theme"], context),
-    dividerTheme: parseDividerTheme(value?["divider_theme"], theme),
+    dividerTheme: dividerTheme,
     snackBarTheme: parseSnackBarTheme(value?["snackbar_theme"], theme),
     bannerTheme: parseBannerTheme(value?["banner_theme"], theme),
     datePickerTheme: parseDatePickerTheme(value?["date_picker_theme"], theme),
     navigationRailTheme:
         parseNavigationRailTheme(value?["navigation_rail_theme"], theme),
     appBarTheme: parseAppBarTheme(value?["appbar_theme"], theme),
-    dropdownMenuTheme:
-        parseDropdownMenuTheme(value?["dropdown_menu_theme"], theme),
+    dropdownMenuTheme: parseDropdownMenuTheme(value?["dropdown_theme"], theme),
     listTileTheme: parseListTileTheme(value?["list_tile_theme"], theme),
     tooltipTheme: parseTooltipTheme(value?["tooltip_theme"], context),
     expansionTileTheme:
@@ -538,8 +530,8 @@ FloatingActionButtonThemeData? parseFloatingActionButtonTheme(
     shape: parseShape(value["shape"], theme),
     enableFeedback: parseBool(value["enable_feedback"]),
     extendedPadding: parsePadding(value["extended_padding"]),
-    extendedTextStyle: parseTextStyle(value["extended_text_style"], theme),
-    extendedIconLabelSpacing: parseDouble(value["extended_icon_label_spacing"]),
+    extendedTextStyle: parseTextStyle(value["text_style"], theme),
+    extendedIconLabelSpacing: parseDouble(value["icon_label_spacing"]),
     mouseCursor: parseWidgetStateMouseCursor(value["mouse_cursor"]),
     iconSize: parseDouble(value["icon_size"]),
     extendedSizeConstraints:
@@ -858,7 +850,7 @@ ListTileThemeData? parseListTileTheme(
     leadingAndTrailingTextStyle:
         parseTextStyle(value["leading_and_trailing_text_style"], theme),
     mouseCursor: parseWidgetStateMouseCursor(value["mouse_cursor"]),
-    minTileHeight: parseDouble(value["min_tile_height"]),
+    minTileHeight: parseDouble(value["min_height"]),
   );
 }