Fix visual overlap of transparent routes barrier when using FadeForwardsPageTransitionsBuilder (flutter#167032)

Reopens flutter#165726 with the removed
test that has become irrelevant.

Depends on: flutter#167324 

Actual master:


https://github.com/user-attachments/assets/28619355-9c1e-4f06-9ede-38c4dddd13df

After fix:


https://github.com/user-attachments/assets/a5f2ecf2-5d8e-445a-b5a9-a7d6c0e3ec5d

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [ ] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

---------

Co-authored-by: Justin McCandless <[email protected]>
Co-authored-by: Qun Cheng <[email protected]>

Author: 3 people

packages/flutter/lib/src/material/page_transitions_theme.dart

@@ -15,6 +15,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 
+import 'color_scheme.dart';
 import 'colors.dart';
 import 'theme.dart';
 
@@ -805,38 +806,43 @@ class FadeForwardsPageTransitionsBuilder extends PageTransitionsBuilder {
     Animation<double> secondaryAnimation,
     Color? backgroundColor,
     Widget? child,
-  ) => DualTransitionBuilder(
-    animation: ReverseAnimation(secondaryAnimation),
-    forwardBuilder: (BuildContext context, Animation<double> animation, Widget? child) {
-      return ColoredBox(
-        color: animation.isAnimating
-            ? backgroundColor ?? Theme.of(context).colorScheme.surface
-            : Colors.transparent,
-        child: FadeTransition(
+  ) {
+    final Widget builder = DualTransitionBuilder(
+      animation: ReverseAnimation(secondaryAnimation),
+      forwardBuilder: (BuildContext context, Animation<double> animation, Widget? child) {
+        return FadeTransition(
           opacity: _fadeInTransition.animate(animation),
           child: SlideTransition(
             position: _secondaryForwardTranslationTween.animate(animation),
             child: child,
           ),
-        ),
-      );
-    },
-    reverseBuilder: (BuildContext context, Animation<double> animation, Widget? child) {
-      return ColoredBox(
-        color: animation.isAnimating
-            ? backgroundColor ?? Theme.of(context).colorScheme.surface
-            : Colors.transparent,
-        child: FadeTransition(
+        );
+      },
+      reverseBuilder: (BuildContext context, Animation<double> animation, Widget? child) {
+        return FadeTransition(
           opacity: _fadeOutTransition.animate(animation),
           child: SlideTransition(
             position: _secondaryBackwardTranslationTween.animate(animation),
             child: child,
           ),
-        ),
-      );
-    },
-    child: child,
-  );
+        );
+      },
+      child: child,
+    );
+
+    final bool isOpaque = ModalRoute.opaqueOf(context) ?? true;
+
+    if (!isOpaque) {
+      return builder;
+    }
+
+    return ColoredBox(
+      color: secondaryAnimation.isAnimating
+          ? backgroundColor ?? ColorScheme.of(context).surface
+          : Colors.transparent,
+      child: builder,
+    );
+  }
 
   @override
   Widget buildTransitions<T>(

packages/flutter/test/material/page_transitions_theme_test.dart

@@ -314,6 +314,81 @@ void main() {
       },
       variant: TargetPlatformVariant.only(TargetPlatform.android),
     );
+
+    testWidgets(
+      'FadeForwardsPageTransitionBuilder does not use ColoredBox for non-opaque routes',
+      (WidgetTester tester) async {
+        await tester.pumpWidget(
+          MaterialApp(
+            theme: ThemeData(
+              pageTransitionsTheme: const PageTransitionsTheme(
+                builders: <TargetPlatform, PageTransitionsBuilder>{
+                  TargetPlatform.android: FadeForwardsPageTransitionsBuilder(
+                    backgroundColor: Colors.lightGreen,
+                  ),
+                },
+              ),
+            ),
+            home: Builder(
+              builder: (BuildContext context) {
+                return Material(
+                  child: TextButton(
+                    onPressed: () {
+                      Navigator.push(
+                        context,
+                        PageRouteBuilder<void>(
+                          opaque: false,
+                          pageBuilder: (_, _, _) {
+                            return Material(
+                              child: TextButton(
+                                onPressed: () {
+                                  Navigator.push(
+                                    context,
+                                    MaterialPageRoute<void>(builder: (_) => const Text('page b')),
+                                  );
+                                },
+                                child: const Text('push b'),
+                              ),
+                            );
+                          },
+                        ),
+                      );
+                    },
+                    child: const Text('push a'),
+                  ),
+                );
+              },
+            ),
+          ),
+        );
+
+        await tester.tap(find.text('push a'));
+        await tester.pumpAndSettle();
+
+        await tester.tap(find.text('push b'));
+        await tester.pump(const Duration(milliseconds: 400));
+
+        void findColoredBox() {
+          expect(
+            find.byWidgetPredicate((Widget w) => w is ColoredBox && w.color == Colors.lightGreen),
+            findsNothing,
+          );
+        }
+
+        // Check that ColoredBox is not used for non-opaque route.
+        findColoredBox();
+
+        await tester.pumpAndSettle();
+
+        Navigator.pop(tester.element(find.text('page b')));
+
+        await tester.pumpAndSettle(const Duration(milliseconds: 400));
+
+        // Check that ColoredBox is not used for non-opaque route
+        findColoredBox();
+      },
+      variant: TargetPlatformVariant.only(TargetPlatform.android),
+    );
   });
 
   testWidgets(