SurfaceTintColor parameter added to control background color more clean

lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart

@@ -43,7 +43,7 @@ class WoltModalSheetTopBar extends StatelessWidget {
         themeData?.backgroundColor ??
         defaultThemeData.backgroundColor;
     final surfaceTintColor =
-        themeData?.surfaceTintColor ?? defaultThemeData.surfaceTintColor;
+        page.surfaceTintColor ?? themeData?.surfaceTintColor ?? defaultThemeData.surfaceTintColor;
 
     // Create the default top bar widget.
     SizedBox topBarWidget = SizedBox(

lib/src/modal_page/sliver_wolt_modal_sheet_page.dart

@@ -115,6 +115,34 @@ class SliverWoltModalSheetPage {
   /// The background color of the page.
   final Color? backgroundColor;
 
+  /// The color of the surface tint overlay applied to the material color
+  /// to indicate elevation for the modal sheet page. The [surfaceTintColor] is applied to the
+  /// modal sheet background color, top bar color, and the sticky action bar wrapper colors.
+  ///
+  /// {@template flutter.material.material.surfaceTintColor}
+  /// Material Design 3 introduced a new way for some components to indicate
+  /// their elevation by using a surface tint color overlay on top of the
+  /// base material [color]. This overlay is painted with an opacity that is
+  /// related to the [elevation] of the material.
+  ///
+  /// If [ThemeData.useMaterial3] is false, then this property is not used.
+  ///
+  /// If [ThemeData.useMaterial3] is true and [surfaceTintColor] is not null and
+  /// not [Colors.transparent], then it will be used to overlay the base [backgroundColor]
+  /// with an opacity based on the [modalElevation].
+  ///
+  /// If [ThemeData.useMaterial3] is true and [surfaceTintColor] is null, then the default
+  /// [surfaceTintColor] value is taken from the [ColorScheme].
+  ///
+  /// See also:
+  ///
+  ///   * [ThemeData.useMaterial3], which turns this feature on.
+  ///   * [ElevationOverlay.applySurfaceTint], which is used to implement the
+  ///     tint.
+  ///   * https://m3.material.io/styles/color/the-color-system/color-roles
+  ///     which specifies how the overlay is applied.
+  final Color? surfaceTintColor;
+
   /// Height of the navigation bar. This value will also be the height of the top bar.
   ///
   /// The navigation bar layer has a transparent background, and sits directly above the top bar
@@ -182,6 +210,7 @@ class SliverWoltModalSheetPage {
     this.heroImage,
     this.heroImageHeight,
     this.backgroundColor,
+    this.surfaceTintColor,
     this.hasSabGradient,
     this.enableDrag,
     this.sabGradientColor,

lib/src/modal_page/wolt_modal_sheet_page.dart

@@ -50,6 +50,7 @@ class WoltModalSheetPage extends SliverWoltModalSheetPage {
     super.heroImage,
     super.heroImageHeight,
     super.backgroundColor,
+    super.surfaceTintColor,
     super.hasSabGradient,
     super.sabGradientColor,
     super.enableDrag,
@@ -71,6 +72,7 @@ class WoltModalSheetPage extends SliverWoltModalSheetPage {
     Widget? heroImage,
     double? heroImageHeight,
     Color? backgroundColor,
+    Color? surfaceTintColor,
     bool? hasSabGradient,
     Color? sabGradientColor,
     bool? enableDrag,
@@ -91,6 +93,7 @@ class WoltModalSheetPage extends SliverWoltModalSheetPage {
       heroImage: heroImage ?? this.heroImage,
       heroImageHeight: heroImageHeight ?? this.heroImageHeight,
       backgroundColor: backgroundColor ?? this.backgroundColor,
+      surfaceTintColor: surfaceTintColor ?? this.surfaceTintColor,
       hasSabGradient: hasSabGradient ?? this.hasSabGradient,
       sabGradientColor: sabGradientColor ?? this.sabGradientColor,
       enableDrag: enableDrag ?? this.enableDrag,

lib/src/theme/wolt_modal_sheet_default_theme_data.dart

@@ -6,19 +6,40 @@ class WoltModalSheetDefaultThemeData extends WoltModalSheetThemeData {
   WoltModalSheetDefaultThemeData(this.context);
 
   final BuildContext context;
-  late final ColorScheme _colors = Theme.of(context).colorScheme;
+  late final ColorScheme _colorsScheme = Theme.of(context).colorScheme;
 
-  /// Overrides the default value for surfaceTintColor.
+  /// The color of the surface tint overlay applied to the material color
+  /// to indicate elevation for the modal sheet page. The [surfaceTintColor] is applied to the
+  /// modal sheet background color, top bar color, and the sticky action bar wrapper colors.
   ///
-  /// If null, [WoltModalSheet] will not display an overlay color.
+  /// {@template flutter.material.material.surfaceTintColor}
+  /// Material Design 3 introduced a new way for some components to indicate
+  /// their elevation by using a surface tint color overlay on top of the
+  /// base material [color]. This overlay is painted with an opacity that is
+  /// related to the [elevation] of the material.
   ///
-  /// See [Material.surfaceTintColor] for more details.
+  /// If [ThemeData.useMaterial3] is false, then this property is not used.
+  ///
+  /// If [ThemeData.useMaterial3] is true and [surfaceTintColor] is not null and
+  /// not [Colors.transparent], then it will be used to overlay the base [backgroundColor]
+  /// with an opacity based on the [modalElevation].
+  ///
+  /// If [ThemeData.useMaterial3] is true and [surfaceTintColor] is null, then the default
+  /// [surfaceTintColor] value is taken from the [ColorScheme].
+  ///
+  /// See also:
+  ///
+  ///   * [ThemeData.useMaterial3], which turns this feature on.
+  ///   * [ElevationOverlay.applySurfaceTint], which is used to implement the
+  ///     tint.
+  ///   * https://m3.material.io/styles/color/the-color-system/color-roles
+  ///     which specifies how the overlay is applied.
   @override
-  Color get surfaceTintColor => _colors.surfaceTint;
+  Color get surfaceTintColor => _colorsScheme.surfaceTint;
 
   /// The background color of the modal sheet.
   @override
-  Color get backgroundColor => _colors.surface;
+  Color get backgroundColor => _colorsScheme.surface;
 
   /// The elevation of the modal sheet.
   @override
@@ -49,7 +70,7 @@ class WoltModalSheetDefaultThemeData extends WoltModalSheetThemeData {
   bool get enableDrag => true;
 
   @override
-  Color get dragHandleColor => _colors.onSurfaceVariant.withOpacity(0.4);
+  Color get dragHandleColor => _colorsScheme.onSurfaceVariant.withOpacity(0.4);
 
   /// The size of the drag handle.
   @override
@@ -61,7 +82,7 @@ class WoltModalSheetDefaultThemeData extends WoltModalSheetThemeData {
 
   /// The elevation color of the modal bar.
   @override
-  Color get topBarShadowColor => _colors.shadow;
+  Color get topBarShadowColor => _colorsScheme.shadow;
 
   /// The elevation of the top bar.
   @override

lib/src/theme/wolt_modal_sheet_theme_data.dart

@@ -34,11 +34,32 @@ class WoltModalSheetThemeData extends ThemeExtension<WoltModalSheetThemeData> {
     this.mainContentScrollPhysics,
   });
 
-  /// Overrides the default value for surfaceTintColor.
+  /// The color of the surface tint overlay applied to the material color
+  /// to indicate elevation for the modal sheet page. The [surfaceTintColor] is applied to the
+  /// modal sheet background color, top bar color, and the sticky action bar wrapper colors.
   ///
-  /// If null, [WoltModalSheet] will not display an overlay color.
+  /// {@template flutter.material.material.surfaceTintColor}
+  /// Material Design 3 introduced a new way for some components to indicate
+  /// their elevation by using a surface tint color overlay on top of the
+  /// base material [color]. This overlay is painted with an opacity that is
+  /// related to the [elevation] of the material.
   ///
-  /// See [Material.surfaceTintColor] for more details.
+  /// If [ThemeData.useMaterial3] is false, then this property is not used.
+  ///
+  /// If [ThemeData.useMaterial3] is true and [surfaceTintColor] is not null and
+  /// not [Colors.transparent], then it will be used to overlay the base [backgroundColor]
+  /// with an opacity based on the [modalElevation].
+  ///
+  /// If [ThemeData.useMaterial3] is true and [surfaceTintColor] is null, then the default
+  /// [surfaceTintColor] value is taken from the [ColorScheme].
+  ///
+  /// See also:
+  ///
+  ///   * [ThemeData.useMaterial3], which turns this feature on.
+  ///   * [ElevationOverlay.applySurfaceTint], which is used to implement the
+  ///     tint.
+  ///   * https://m3.material.io/styles/color/the-color-system/color-roles
+  ///     which specifies how the overlay is applied.
   final Color? surfaceTintColor;
 
   /// The background color of the modal sheet.

lib/src/widgets/wolt_sticky_action_bar_wrapper.dart

@@ -38,8 +38,9 @@ class WoltStickyActionBarWrapper extends StatelessWidget {
     final hasSabGradient = page.hasSabGradient ??
         themeData?.hasSabGradient ??
         defaultThemeData.hasSabGradient;
-    final surfaceTintColor =
-        themeData?.surfaceTintColor ?? defaultThemeData.surfaceTintColor;
+    final surfaceTintColor = page.surfaceTintColor ??
+        themeData?.surfaceTintColor ??
+        defaultThemeData.surfaceTintColor;
     return Column(
       children: [
         // If a gradient is required, add a Container with a linear gradient decoration.

lib/src/wolt_modal_sheet.dart

@@ -263,7 +263,8 @@ class _WoltModalSheetState extends State<WoltModalSheet> {
                   defaultThemeData.maxDialogWidth;
               final shadowColor =
                   themeData?.shadowColor ?? defaultThemeData.shadowColor;
-              final surfaceTintColor = themeData?.surfaceTintColor ??
+              final surfaceTintColor = page.surfaceTintColor ??
+                  themeData?.surfaceTintColor ??
                   defaultThemeData.surfaceTintColor;
               final modalElevation =
                   themeData?.modalElevation ?? defaultThemeData.modalElevation;