ScaffoldBackgroundColor should default to ColorScheme.surface (#1…

…49772) `ThemeData.ScaffoldBackgroundColor` originally defaults to `ColorScheme.background`. As background in ColorScheme is deprecated, customizing background is not able to change scaffold background color. This PR is to make `scaffoldBackgroundColor` defaults to `ColorScheme.surface` which is the replacement of `ColorScheme.background`. Fixes flutter/flutter#149158
engine-flutter-autoroll · Jun 17, 2024 · 17eda50 · 17eda50
1 parent 9b6813f
commit 17eda50
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 30 deletions.
diff --git a/packages/flutter/lib/src/material/theme_data.dart b/packages/flutter/lib/src/material/theme_data.dart
@@ -404,11 +404,11 @@ class ThemeData with Diagnosticable {
 
       // Default some of the color settings to values from the color scheme
       primaryColor ??= primarySurfaceColor;
-      canvasColor ??= colorScheme.background;
-      scaffoldBackgroundColor ??= colorScheme.background;
+      canvasColor ??= colorScheme.surface;
+      scaffoldBackgroundColor ??= colorScheme.surface;
       cardColor ??= colorScheme.surface;
       dividerColor ??= colorScheme.outline;
-      dialogBackgroundColor ??= colorScheme.background;
+      dialogBackgroundColor ??= colorScheme.surface;
       indicatorColor ??= onPrimarySurfaceColor;
       applyElevationOverlayColor ??= brightness == Brightness.dark;
     }
@@ -776,11 +776,11 @@ class ThemeData with Diagnosticable {
       colorScheme: colorScheme,
       brightness: colorScheme.brightness,
       primaryColor: primarySurfaceColor,
-      canvasColor: colorScheme.background,
-      scaffoldBackgroundColor: colorScheme.background,
+      canvasColor: colorScheme.surface,
+      scaffoldBackgroundColor: colorScheme.surface,
       cardColor: colorScheme.surface,
       dividerColor: colorScheme.onSurface.withOpacity(0.12),
-      dialogBackgroundColor: colorScheme.background,
+      dialogBackgroundColor: colorScheme.surface,
       indicatorColor: onPrimarySurfaceColor,
       textTheme: textTheme,
       applyElevationOverlayColor: isDark,

diff --git a/packages/flutter/test/material/dialog_test.dart b/packages/flutter/test/material/dialog_test.dart
@@ -111,6 +111,28 @@ void main() {
     expect(materialWidget.color, customColor);
   });
 
+  testWidgets('Dialog background defaults to ColorScheme.surface', (WidgetTester tester) async {
+    final ThemeData theme = ThemeData(
+      colorScheme: ThemeData().colorScheme.copyWith(
+        surface: Colors.orange,
+        background: Colors.green,
+      )
+    );
+    const Dialog dialog = Dialog(
+      child: SizedBox(
+        width: 200,
+        height: 200
+      ),
+    );
+    await tester.pumpWidget(_buildAppWithDialog(dialog, theme: theme));
+
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle();
+
+    final Material materialWidget = _getMaterialFromDialog(tester);
+    expect(materialWidget.color, theme.colorScheme.surface);
+  });
+
   testWidgets('Material2 - Dialog Defaults', (WidgetTester tester) async {
     const AlertDialog dialog = AlertDialog(
       title: Text('Title'),

diff --git a/packages/flutter/test/material/scaffold_test.dart b/packages/flutter/test/material/scaffold_test.dart
@@ -3395,6 +3395,29 @@ void main() {
     // FAB is not visible.
     expect(find.byType(FloatingActionButton), findsNothing);
   });
+
+  testWidgets('Scaffold background color defaults to ColorScheme.surface', (WidgetTester tester) async {
+    final ThemeData theme = ThemeData(
+      colorScheme: ThemeData().colorScheme.copyWith(
+        surface: Colors.orange,
+        background: Colors.green,
+      )
+    );
+    await tester.pumpWidget(
+      MaterialApp(
+        theme: theme,
+        home: const Scaffold(
+          body: SizedBox.expand(),
+        ),
+      ),
+    );
+
+    final Material scaffoldMaterial = tester.widget<Material>(find.descendant(
+      of: find.byType(Scaffold),
+      matching: find.byType(Material).first,
+    ));
+    expect(scaffoldMaterial.color, theme.colorScheme.surface);
+  });
 }
 
 class _GeometryListener extends StatefulWidget {

diff --git a/packages/flutter/test/material/theme_data_test.dart b/packages/flutter/test/material/theme_data_test.dart
@@ -190,11 +190,11 @@ void main() {
     expect(theme.colorScheme.brightness, Brightness.light);
 
     expect(theme.primaryColor, theme.colorScheme.primary);
-    expect(theme.canvasColor, theme.colorScheme.background);
-    expect(theme.scaffoldBackgroundColor, theme.colorScheme.background);
+    expect(theme.canvasColor, theme.colorScheme.surface);
+    expect(theme.scaffoldBackgroundColor, theme.colorScheme.surface);
     expect(theme.cardColor, theme.colorScheme.surface);
     expect(theme.dividerColor, theme.colorScheme.outline);
-    expect(theme.dialogBackgroundColor, theme.colorScheme.background);
+    expect(theme.dialogBackgroundColor, theme.colorScheme.surface);
     expect(theme.indicatorColor, theme.colorScheme.onPrimary);
     expect(theme.applyElevationOverlayColor, false);
   });
@@ -257,11 +257,11 @@ void main() {
     expect(theme.colorScheme.brightness, Brightness.dark);
 
     expect(theme.primaryColor, theme.colorScheme.surface);
-    expect(theme.canvasColor, theme.colorScheme.background);
-    expect(theme.scaffoldBackgroundColor, theme.colorScheme.background);
+    expect(theme.canvasColor, theme.colorScheme.surface);
+    expect(theme.scaffoldBackgroundColor, theme.colorScheme.surface);
     expect(theme.cardColor, theme.colorScheme.surface);
     expect(theme.dividerColor, theme.colorScheme.outline);
-    expect(theme.dialogBackgroundColor, theme.colorScheme.background);
+    expect(theme.dialogBackgroundColor, theme.colorScheme.surface);
     expect(theme.indicatorColor, theme.colorScheme.onSurface);
     expect(theme.applyElevationOverlayColor, true);
   });
@@ -319,11 +319,11 @@ void main() {
     expect(theme.colorScheme.brightness, Brightness.light);
 
     expect(theme.primaryColor, theme.colorScheme.primary);
-    expect(theme.canvasColor, theme.colorScheme.background);
-    expect(theme.scaffoldBackgroundColor, theme.colorScheme.background);
+    expect(theme.canvasColor, theme.colorScheme.surface);
+    expect(theme.scaffoldBackgroundColor, theme.colorScheme.surface);
     expect(theme.cardColor, theme.colorScheme.surface);
     expect(theme.dividerColor, theme.colorScheme.outline);
-    expect(theme.dialogBackgroundColor, theme.colorScheme.background);
+    expect(theme.dialogBackgroundColor, theme.colorScheme.surface);
     expect(theme.indicatorColor, theme.colorScheme.onPrimary);
     expect(theme.applyElevationOverlayColor, false);
   });
@@ -382,11 +382,11 @@ void main() {
     expect(theme.colorScheme.brightness, Brightness.light);
 
     expect(theme.primaryColor, theme.colorScheme.primary);
-    expect(theme.canvasColor, theme.colorScheme.background);
-    expect(theme.scaffoldBackgroundColor, theme.colorScheme.background);
+    expect(theme.canvasColor, theme.colorScheme.surface);
+    expect(theme.scaffoldBackgroundColor, theme.colorScheme.surface);
     expect(theme.cardColor, theme.colorScheme.surface);
     expect(theme.dividerColor, theme.colorScheme.outline);
-    expect(theme.dialogBackgroundColor, theme.colorScheme.background);
+    expect(theme.dialogBackgroundColor, theme.colorScheme.surface);
     expect(theme.indicatorColor, theme.colorScheme.onPrimary);
     expect(theme.applyElevationOverlayColor, false);
   });
@@ -444,11 +444,11 @@ void main() {
     expect(theme.colorScheme.brightness, Brightness.dark);
 
     expect(theme.primaryColor, theme.colorScheme.surface);
-    expect(theme.canvasColor, theme.colorScheme.background);
-    expect(theme.scaffoldBackgroundColor, theme.colorScheme.background);
+    expect(theme.canvasColor, theme.colorScheme.surface);
+    expect(theme.scaffoldBackgroundColor, theme.colorScheme.surface);
     expect(theme.cardColor, theme.colorScheme.surface);
     expect(theme.dividerColor, theme.colorScheme.outline);
-    expect(theme.dialogBackgroundColor, theme.colorScheme.background);
+    expect(theme.dialogBackgroundColor, theme.colorScheme.surface);
     expect(theme.indicatorColor, theme.colorScheme.onSurface);
     expect(theme.applyElevationOverlayColor, true);
   });
@@ -460,9 +460,9 @@ void main() {
     expect(theme.brightness, equals(Brightness.light));
     expect(theme.primaryColor, equals(lightColors.primary));
     expect(theme.cardColor, equals(lightColors.surface));
-    expect(theme.canvasColor, equals(lightColors.background));
-    expect(theme.scaffoldBackgroundColor, equals(lightColors.background));
-    expect(theme.dialogBackgroundColor, equals(lightColors.background));
+    expect(theme.canvasColor, equals(lightColors.surface));
+    expect(theme.scaffoldBackgroundColor, equals(lightColors.surface));
+    expect(theme.dialogBackgroundColor, equals(lightColors.surface));
     expect(theme.applyElevationOverlayColor, isFalse);
   });
 
@@ -474,9 +474,9 @@ void main() {
     // in dark theme's the color used for main components is surface instead of primary
     expect(theme.primaryColor, equals(darkColors.surface));
     expect(theme.cardColor, equals(darkColors.surface));
-    expect(theme.canvasColor, equals(darkColors.background));
-    expect(theme.scaffoldBackgroundColor, equals(darkColors.background));
-    expect(theme.dialogBackgroundColor, equals(darkColors.background));
+    expect(theme.canvasColor, equals(darkColors.surface));
+    expect(theme.scaffoldBackgroundColor, equals(darkColors.surface));
+    expect(theme.dialogBackgroundColor, equals(darkColors.surface));
     expect(theme.applyElevationOverlayColor, isTrue);
   });
 
@@ -1223,9 +1223,9 @@ void main() {
     expect(theme.colorScheme.brightness, equals(Brightness.dark));
     expect(theme.primaryColor, equals(lightColors.primary));
     expect(theme.cardColor, equals(lightColors.surface));
-    expect(theme.canvasColor, equals(lightColors.background));
-    expect(theme.scaffoldBackgroundColor, equals(lightColors.background));
-    expect(theme.dialogBackgroundColor, equals(lightColors.background));
+    expect(theme.canvasColor, equals(lightColors.surface));
+    expect(theme.scaffoldBackgroundColor, equals(lightColors.surface));
+    expect(theme.dialogBackgroundColor, equals(lightColors.surface));
     expect(theme.applyElevationOverlayColor, isFalse);
   });