From 983597c6abd3fcf952c224ecdad3ba592195859d Mon Sep 17 00:00:00 2001 From: yusufnadar Date: Sun, 3 Mar 2024 11:09:25 +0300 Subject: [PATCH 1/2] SurfaceTintColor parameter added to control background color more clean --- .../wolt_modal_sheet_top_bar.dart | 2 +- .../sliver_wolt_modal_sheet_page.dart | 29 +++++++++++++++ lib/src/modal_page/wolt_modal_sheet_page.dart | 3 ++ .../wolt_modal_sheet_default_theme_data.dart | 37 +++++++++++++++---- .../theme/wolt_modal_sheet_theme_data.dart | 27 ++++++++++++-- .../wolt_sticky_action_bar_wrapper.dart | 5 ++- lib/src/wolt_modal_sheet.dart | 3 +- 7 files changed, 91 insertions(+), 15 deletions(-) diff --git a/lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart b/lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart index c52889bc..4f4613a8 100644 --- a/lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart +++ b/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( diff --git a/lib/src/modal_page/sliver_wolt_modal_sheet_page.dart b/lib/src/modal_page/sliver_wolt_modal_sheet_page.dart index f0d1c1fe..026d7ea2 100644 --- a/lib/src/modal_page/sliver_wolt_modal_sheet_page.dart +++ b/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, diff --git a/lib/src/modal_page/wolt_modal_sheet_page.dart b/lib/src/modal_page/wolt_modal_sheet_page.dart index 49defb90..47347281 100644 --- a/lib/src/modal_page/wolt_modal_sheet_page.dart +++ b/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, diff --git a/lib/src/theme/wolt_modal_sheet_default_theme_data.dart b/lib/src/theme/wolt_modal_sheet_default_theme_data.dart index c1594ddd..bbbd7baa 100644 --- a/lib/src/theme/wolt_modal_sheet_default_theme_data.dart +++ b/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 diff --git a/lib/src/theme/wolt_modal_sheet_theme_data.dart b/lib/src/theme/wolt_modal_sheet_theme_data.dart index 09170e37..b5dfd368 100644 --- a/lib/src/theme/wolt_modal_sheet_theme_data.dart +++ b/lib/src/theme/wolt_modal_sheet_theme_data.dart @@ -34,11 +34,32 @@ class WoltModalSheetThemeData extends ThemeExtension { 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. diff --git a/lib/src/widgets/wolt_sticky_action_bar_wrapper.dart b/lib/src/widgets/wolt_sticky_action_bar_wrapper.dart index fc2f6881..1bae858f 100644 --- a/lib/src/widgets/wolt_sticky_action_bar_wrapper.dart +++ b/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. diff --git a/lib/src/wolt_modal_sheet.dart b/lib/src/wolt_modal_sheet.dart index cc8bba53..d0fb1efa 100644 --- a/lib/src/wolt_modal_sheet.dart +++ b/lib/src/wolt_modal_sheet.dart @@ -263,7 +263,8 @@ class _WoltModalSheetState extends State { 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; From af1f70d84134fac6447d15406883cae0665eb383 Mon Sep 17 00:00:00 2001 From: yusufnadar Date: Sun, 3 Mar 2024 11:13:34 +0300 Subject: [PATCH 2/2] fix --- .../components/main_content/wolt_modal_sheet_top_bar.dart | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart b/lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart index 4f4613a8..266aeb70 100644 --- a/lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart +++ b/lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart @@ -42,8 +42,9 @@ class WoltModalSheetTopBar extends StatelessWidget { final backgroundColor = page.backgroundColor ?? themeData?.backgroundColor ?? defaultThemeData.backgroundColor; - final surfaceTintColor = - page.surfaceTintColor ?? themeData?.surfaceTintColor ?? defaultThemeData.surfaceTintColor; + final surfaceTintColor = page.surfaceTintColor ?? + themeData?.surfaceTintColor ?? + defaultThemeData.surfaceTintColor; // Create the default top bar widget. SizedBox topBarWidget = SizedBox(