Add scrim color parameter to _ZoomEnterTransitionPainter (flutter#152815)

Michal-MK · web-flow · commit 18c325af170e · 2024-09-09T21:49:07.000Z
Implements flutter#152064 There is currently no test here as I am not sure how to do it efficiently, I tried making the painter public and adding the visibleForTestinhg attribute, but then I need to add comments to everything... And even when I did that I did not know how to test the painter itself maybe via Golden tests? I have not done those in the Flutter repo yet. And if it can be done without them then that is definitely a better way. I'll wait for what the review says I should do.
diff --git a/packages/flutter/lib/src/material/page_transitions_theme.dart b/packages/flutter/lib/src/material/page_transitions_theme.dart
@@ -204,6 +204,7 @@ class _ZoomPageTransition extends StatelessWidget {
     required this.secondaryAnimation,
     required this.allowSnapshotting,
     required this.allowEnterRouteSnapshotting,
+    this.backgroundColor,
     this.child,
   });
 
@@ -253,6 +254,11 @@ class _ZoomPageTransition extends StatelessWidget {
   ///    routes.
   final bool allowSnapshotting;
 
+  /// The color of the scrim (background) that fades in and out during the transition.
+  ///
+  /// If not provided, defaults to current theme's [ColorScheme.surface] color.
+  final Color? backgroundColor;
+
   /// The widget below this widget in the tree.
   ///
   /// This widget will transition in and out as driven by [animation] and
@@ -270,7 +276,7 @@ class _ZoomPageTransition extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final Color backgroundColor = Theme.of(context).colorScheme.surface;
+    final Color enterTransitionBackgroundColor = backgroundColor ?? Theme.of(context).colorScheme.surface;
     return DualTransitionBuilder(
       animation: animation,
       forwardBuilder: (
@@ -281,7 +287,7 @@ class _ZoomPageTransition extends StatelessWidget {
         return _ZoomEnterTransition(
           animation: animation,
           allowSnapshotting: allowSnapshotting && allowEnterRouteSnapshotting,
-          backgroundColor: backgroundColor,
+          backgroundColor: enterTransitionBackgroundColor,
           child: child,
         );
       },
@@ -308,7 +314,7 @@ class _ZoomPageTransition extends StatelessWidget {
             animation: animation,
             allowSnapshotting: allowSnapshotting && allowEnterRouteSnapshotting ,
             reverse: true,
-            backgroundColor: backgroundColor,
+            backgroundColor: enterTransitionBackgroundColor,
             child: child,
           );
         },
@@ -672,6 +678,7 @@ class ZoomPageTransitionsBuilder extends PageTransitionsBuilder {
   const ZoomPageTransitionsBuilder({
     this.allowSnapshotting = true,
     this.allowEnterRouteSnapshotting = true,
+    this.backgroundColor,
   });
 
   /// Whether zoom page transitions will prefer to animate a snapshot of the entering
@@ -709,6 +716,11 @@ class ZoomPageTransitionsBuilder extends PageTransitionsBuilder {
   /// not be snapshotted.
   final bool allowEnterRouteSnapshotting;
 
+  /// The color of the scrim (background) that fades in and out during the transition.
+  ///
+  /// If not provided, defaults to current theme's [ColorScheme.surface] color.
+  final Color? backgroundColor;
+
   // Allows devicelab benchmarks to force disable the snapshotting. This is
   // intended to allow us to profile and fix the underlying performance issues
   // for the Impeller backend.
@@ -734,6 +746,7 @@ class ZoomPageTransitionsBuilder extends PageTransitionsBuilder {
       secondaryAnimation: secondaryAnimation,
       allowSnapshotting: allowSnapshotting && route.allowSnapshotting,
       allowEnterRouteSnapshotting: allowEnterRouteSnapshotting,
+      backgroundColor: backgroundColor,
       child: child,
     );
   }
diff --git a/packages/flutter/test/material/page_transitions_theme_test.dart b/packages/flutter/test/material/page_transitions_theme_test.dart
@@ -598,7 +598,7 @@ void main() {
 
     // Pump till animation is half-way through.
     await tester.pump();
-    await tester.pump(const Duration(milliseconds:75));
+    await tester.pump(const Duration(milliseconds: 75));
 
     // Verify that the render box is painting the right color for scaffolded pages.
     final RenderBox scaffoldedRenderBox = tester.firstRenderObject<RenderBox>(find.byType(MaterialApp));
@@ -614,7 +614,7 @@ void main() {
 
     // Pump till animation is half-way through.
     await tester.pump();
-    await tester.pump(const Duration(milliseconds:125));
+    await tester.pump(const Duration(milliseconds: 125));
 
     // Verify that the render box is painting the right color for non-scaffolded pages.
     final RenderBox nonScaffoldedRenderBox = tester.firstRenderObject<RenderBox>(find.byType(MaterialApp));
@@ -626,4 +626,111 @@ void main() {
     // Verify that the transition successfully completed.
     expect(find.text('Back to home route...'), findsOneWidget);
   }, variant: TargetPlatformVariant.all());
+
+  testWidgets('ZoomPageTransitionsBuilder uses developer-provided color during transition effects if provided', (WidgetTester tester) async {
+    // Color that is being tested for presence.
+    const Color testSurfaceColor = Colors.red;
+
+    final Map<String, WidgetBuilder> routes = <String, WidgetBuilder>{
+      '/': (BuildContext context) => Material(
+        child: Scaffold(
+          appBar: AppBar(
+            title: const Text('Home Page'),
+          ),
+          body: Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                ElevatedButton(
+                  onPressed: () {
+                    Navigator.pushNamed(context, '/scaffolded');
+                  },
+                  child: const Text('Route with scaffold!'),
+                ),
+                ElevatedButton(
+                  onPressed: () {
+                    Navigator.pushNamed(context, '/not-scaffolded');
+                  },
+                  child: const Text('Route with NO scaffold!'),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+      '/scaffolded': (BuildContext context) => Material(
+        child: Scaffold(
+          appBar: AppBar(
+            title: const Text('Scaffolded Page'),
+          ),
+          body: Center(
+            child: ElevatedButton(
+              onPressed: () {
+                Navigator.pop(context);
+              },
+              child: const Text('Back to home route...'),
+            ),
+          ),
+        ),
+      ),
+      '/not-scaffolded': (BuildContext context) => Material(
+        child: Center(
+          child: ElevatedButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            child: const Text('Back to home route...'),
+          ),
+        ),
+      ),
+    };
+
+    await tester.pumpWidget(
+      MaterialApp(
+        theme: ThemeData(
+          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, surface: Colors.blue),
+          pageTransitionsTheme: PageTransitionsTheme(
+            builders: <TargetPlatform, PageTransitionsBuilder>{
+              // Force all platforms to use ZoomPageTransitionsBuilder to test each one.
+              for (final TargetPlatform platform in TargetPlatform.values) platform: const ZoomPageTransitionsBuilder(backgroundColor: testSurfaceColor),
+            },
+          ),
+        ),
+        routes: routes,
+      ),
+    );
+
+    // Go to scaffolded page.
+    await tester.tap(find.text('Route with scaffold!'));
+
+    // Pump till animation is half-way through.
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 75));
+
+    // Verify that the render box is painting the right color for scaffolded pages.
+    final RenderBox scaffoldedRenderBox = tester.firstRenderObject<RenderBox>(find.byType(MaterialApp));
+    // Expect the color to be at exactly 12.2% opacity at this time.
+    expect(scaffoldedRenderBox, paints..rect(color: testSurfaceColor.withOpacity(0.122)));
+
+    await tester.pumpAndSettle();
+
+    // Go back home and then go to non-scaffolded page.
+    await tester.tap(find.text('Back to home route...'));
+    await tester.pumpAndSettle();
+    await tester.tap(find.text('Route with NO scaffold!'));
+
+    // Pump till animation is half-way through.
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 125));
+
+    // Verify that the render box is painting the right color for non-scaffolded pages.
+    final RenderBox nonScaffoldedRenderBox = tester.firstRenderObject<RenderBox>(find.byType(MaterialApp));
+    // Expect the color to be at exactly 59.6% opacity at this time.
+    expect(nonScaffoldedRenderBox, paints..rect(color: testSurfaceColor.withOpacity(0.596)));
+
+    await tester.pumpAndSettle();
+
+    // Verify that the transition successfully completed.
+    expect(find.text('Back to home route...'), findsOneWidget);
+  }, variant: TargetPlatformVariant.all());
 }
