✨ Android Q transition by default (#98559)

Author: AlexV525

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

@@ -63,19 +63,24 @@ class MaterialPageRoute<T> extends PageRoute<T> with MaterialRouteTransitionMixi
 /// A mixin that provides platform-adaptive transitions for a [PageRoute].
 ///
 /// {@template flutter.material.materialRouteTransitionMixin}
-/// For Android, the entrance transition for the page slides the route upwards
-/// and fades it in. The exit transition is the same, but in reverse.
-///
-/// The transition is adaptive to the platform and on iOS, the route slides in
-/// from the right and exits in reverse. The route also shifts to the left in
-/// parallax when another page enters to cover it. (These directions are flipped
-/// in environments with a right-to-left reading direction.)
+/// For Android, the entrance transition for the page zooms in and fades in
+/// while the exiting page zooms out and fades out. The exit transition is similar,
+/// but in reverse.
+///
+/// For iOS, the page slides in from the right and exits in reverse. The page
+/// also shifts to the left in parallax when another page enters to cover it.
+/// (These directions are flipped in environments with a right-to-left reading
+/// direction.)
 /// {@endtemplate}
 ///
 /// See also:
 ///
 ///  * [PageTransitionsTheme], which defines the default page transitions used
 ///    by the [MaterialRouteTransitionMixin.buildTransitions].
+///  * [ZoomPageTransitionsBuilder], which is the default page transition used
+///    by the [PageTransitionsTheme].
+///  * [CupertinoPageTransitionsBuilder], which is the default page transition
+///    for iOS and macOS.
 mixin MaterialRouteTransitionMixin<T> on PageRoute<T> {
   /// Builds the primary contents of the route.
   @protected

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

@@ -9,7 +9,8 @@ import 'colors.dart';
 import 'theme.dart';
 
 // Slides the page upwards and fades it in, starting from 1/4 screen
-// below the top.
+// below the top. The transition is intended to match the default for
+// Android O.
 class _FadeUpwardsPageTransition extends StatelessWidget {
   _FadeUpwardsPageTransition({
     Key? key,
@@ -146,7 +147,7 @@ class _OpenUpwardsPageTransition extends StatelessWidget {
 }
 
 // Zooms and fades a new page in, zooming out the previous page. This transition
-// is designed to match the Android 10 activity transition.
+// is designed to match the Android Q activity transition.
 class _ZoomPageTransition extends StatelessWidget {
   /// Creates a [_ZoomPageTransition].
   ///
@@ -291,16 +292,16 @@ class _ZoomEnterTransition extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     double opacity = 0;
-    // The transition's scrim opacity only increases on the forward transition. In the reverse
-    // transition, the opacity should always be 0.0.
+    // The transition's scrim opacity only increases on the forward transition.
+    // In the reverse transition, the opacity should always be 0.0.
     //
-    // Therefore, we need to only apply the scrim opacity animation when the transition
-    // is running forwards.
+    // Therefore, we need to only apply the scrim opacity animation when
+    // the transition is running forwards.
     //
-    // The reason that we check that the animation's status is not `completed` instead
-    // of checking that it is `forward` is that this allows the interrupted reversal of the
-    // forward transition to smoothly fade the scrim away. This prevents a disjointed
-    // removal of the scrim.
+    // The reason that we check that the animation's status is not `completed`
+    // instead of checking that it is `forward` is that this allows
+    // the interrupted reversal of the forward transition to smoothly fade
+    // the scrim away. This prevents a disjointed removal of the scrim.
     if (!reverse && animation.status != AnimationStatus.completed) {
       opacity = _scrimOpacityTween.evaluate(animation)!;
     }
@@ -317,17 +318,14 @@ class _ZoomEnterTransition extends StatelessWidget {
     return AnimatedBuilder(
       animation: animation,
       builder: (BuildContext context, Widget? child) {
-        return Container(
+        return ColoredBox(
           color: Colors.black.withOpacity(opacity),
           child: child,
         );
       },
       child: FadeTransition(
         opacity: fadeTransition,
-        child: ScaleTransition(
-          scale: scaleTransition,
-          child: child,
-        ),
+        child: ScaleTransition(scale: scaleTransition, child: child),
       ),
     );
   }
@@ -374,10 +372,7 @@ class _ZoomExitTransition extends StatelessWidget {
 
     return FadeTransition(
       opacity: fadeTransition,
-      child: ScaleTransition(
-        scale: scaleTransition,
-        child: child,
-      ),
+      child: ScaleTransition(scale: scaleTransition, child: child),
     );
   }
 }
@@ -391,11 +386,12 @@ class _ZoomExitTransition extends StatelessWidget {
 ///
 /// See also:
 ///
-///  * [FadeUpwardsPageTransitionsBuilder], which defines a default page transition.
+///  * [FadeUpwardsPageTransitionsBuilder], which defines a page transition
+///    that's similar to the one provided by Android O.
 ///  * [OpenUpwardsPageTransitionsBuilder], which defines a page transition
 ///    that's similar to the one provided by Android P.
-///  * [ZoomPageTransitionsBuilder], which defines a page transition similar
-///    to the one provided in Android 10.
+///  * [ZoomPageTransitionsBuilder], which defines the default page transition
+///    that's similar to the one provided in Android Q.
 ///  * [CupertinoPageTransitionsBuilder], which defines a horizontal page
 ///    transition that matches native iOS page transitions.
 abstract class PageTransitionsBuilder {
@@ -419,18 +415,19 @@ abstract class PageTransitionsBuilder {
   );
 }
 
-/// Used by [PageTransitionsTheme] to define a default [MaterialPageRoute] page
-/// transition animation.
+/// Used by [PageTransitionsTheme] to define a vertically fading
+/// [MaterialPageRoute] page transition animation that looks like
+/// the default page transition used on Android O.
 ///
-/// The default animation fades the new page in while translating it upwards,
+/// The animation fades the new page in while translating it upwards,
 /// starting from about 25% below the top of the screen.
 ///
 /// See also:
 ///
 ///  * [OpenUpwardsPageTransitionsBuilder], which defines a page transition
 ///    that's similar to the one provided by Android P.
-///  * [ZoomPageTransitionsBuilder], which defines a page transition similar
-///    to the one provided in Android 10.
+///  * [ZoomPageTransitionsBuilder], which defines the default page transition
+///    that's similar to the one provided in Android Q.
 ///  * [CupertinoPageTransitionsBuilder], which defines a horizontal page
 ///    transition that matches native iOS page transitions.
 class FadeUpwardsPageTransitionsBuilder extends PageTransitionsBuilder {
@@ -455,9 +452,10 @@ class FadeUpwardsPageTransitionsBuilder extends PageTransitionsBuilder {
 ///
 /// See also:
 ///
-///  * [FadeUpwardsPageTransitionsBuilder], which defines a default page transition.
-///  * [ZoomPageTransitionsBuilder], which defines a page transition similar
-///    to the one provided in Android 10.
+///  * [FadeUpwardsPageTransitionsBuilder], which defines a page transition
+///    that's similar to the one provided by Android O.
+///  * [ZoomPageTransitionsBuilder], which defines the default page transition
+///    that's similar to the one provided in Android Q.
 ///  * [CupertinoPageTransitionsBuilder], which defines a horizontal page
 ///    transition that matches native iOS page transitions.
 class OpenUpwardsPageTransitionsBuilder extends PageTransitionsBuilder {
@@ -483,18 +481,19 @@ class OpenUpwardsPageTransitionsBuilder extends PageTransitionsBuilder {
 
 /// Used by [PageTransitionsTheme] to define a zooming [MaterialPageRoute] page
 /// transition animation that looks like the default page transition used on
-/// Android 10.
+/// Android Q.
 ///
 /// See also:
 ///
-///  * [FadeUpwardsPageTransitionsBuilder], which defines a default page transition.
+///  * [FadeUpwardsPageTransitionsBuilder], which defines a page transition
+///    that's similar to the one provided by Android O.
 ///  * [OpenUpwardsPageTransitionsBuilder], which defines a page transition
-///    similar to the one provided by Android P.
+///    that's similar to the one provided by Android P.
 ///  * [CupertinoPageTransitionsBuilder], which defines a horizontal page
 ///    transition that matches native iOS page transitions.
 class ZoomPageTransitionsBuilder extends PageTransitionsBuilder {
   /// Constructs a page transition animation that matches the transition used on
-  /// Android 10.
+  /// Android Q.
   const ZoomPageTransitionsBuilder();
 
   @override
@@ -518,11 +517,12 @@ class ZoomPageTransitionsBuilder extends PageTransitionsBuilder {
 ///
 /// See also:
 ///
-///  * [FadeUpwardsPageTransitionsBuilder], which defines a default page transition.
+///  * [FadeUpwardsPageTransitionsBuilder], which defines a page transition
+///    that's similar to the one provided by Android O.
 ///  * [OpenUpwardsPageTransitionsBuilder], which defines a page transition
 ///    that's similar to the one provided by Android P.
-///  * [ZoomPageTransitionsBuilder], which defines a page transition similar
-///    to the one provided in Android 10.
+///  * [ZoomPageTransitionsBuilder], which defines the default page transition
+///    that's similar to the one provided in Android Q.
 class CupertinoPageTransitionsBuilder extends PageTransitionsBuilder {
   /// Constructs a page transition animation that matches the iOS transition.
   const CupertinoPageTransitionsBuilder();
@@ -553,34 +553,35 @@ class CupertinoPageTransitionsBuilder extends PageTransitionsBuilder {
 ///
 ///  * [ThemeData.pageTransitionsTheme], which defines the default page
 ///    transitions for the overall theme.
-///  * [FadeUpwardsPageTransitionsBuilder], which defines a default page transition.
+///  * [FadeUpwardsPageTransitionsBuilder], which defines a page transition
+///    that's similar to the one provided by Android O.
 ///  * [OpenUpwardsPageTransitionsBuilder], which defines a page transition
 ///    that's similar to the one provided by Android P.
+///  * [ZoomPageTransitionsBuilder], which defines the default page transition
+///    that's similar to the one provided by Android Q.
 ///  * [CupertinoPageTransitionsBuilder], which defines a horizontal page
 ///    transition that matches native iOS page transitions.
 @immutable
 class PageTransitionsTheme with Diagnosticable {
   /// Constructs an object that selects a transition based on the platform.
   ///
-  /// By default the list of builders is: [FadeUpwardsPageTransitionsBuilder]
+  /// By default the list of builders is: [ZoomPageTransitionsBuilder]
   /// for [TargetPlatform.android], and [CupertinoPageTransitionsBuilder] for
   /// [TargetPlatform.iOS] and [TargetPlatform.macOS].
   const PageTransitionsTheme({ Map<TargetPlatform, PageTransitionsBuilder> builders = _defaultBuilders }) : _builders = builders;
 
   static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
-    TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
+    TargetPlatform.android: ZoomPageTransitionsBuilder(),
     TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
-    TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(),
     TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
-    TargetPlatform.windows: FadeUpwardsPageTransitionsBuilder(),
   };
 
   /// The [PageTransitionsBuilder]s supported by this theme.
   Map<TargetPlatform, PageTransitionsBuilder> get builders => _builders;
   final Map<TargetPlatform, PageTransitionsBuilder> _builders;
 
   /// Delegates to the builder for the current [ThemeData.platform]
-  /// or [FadeUpwardsPageTransitionsBuilder].
+  /// or [ZoomPageTransitionsBuilder].
   ///
   /// [MaterialPageRoute.buildTransitions] delegates to this method.
   Widget buildTransitions<T>(
@@ -596,7 +597,7 @@ class PageTransitionsTheme with Diagnosticable {
       platform = TargetPlatform.iOS;
 
     final PageTransitionsBuilder matchingBuilder =
-      builders[platform] ?? const FadeUpwardsPageTransitionsBuilder();
+      builders[platform] ?? const ZoomPageTransitionsBuilder();
     return matchingBuilder.buildTransitions<T>(route, context, animation, secondaryAnimation, child);
   }
 

packages/flutter/test/material/bottom_navigation_bar_theme_test.dart

@@ -151,13 +151,27 @@ void main() {
       ),
     );
 
+    final Finder findACTransform = find.descendant(
+      of: find.byType(BottomNavigationBar),
+      matching: find.ancestor(
+        of: find.text('AC'),
+        matching: find.byType(Transform),
+      ),
+    );
+    final Finder findAlarmTransform = find.descendant(
+      of: find.byType(BottomNavigationBar),
+      matching: find.ancestor(
+        of: find.text('Alarm'),
+        matching: find.byType(Transform),
+      ),
+    );
     final TextStyle selectedFontStyle = tester.renderObject<RenderParagraph>(find.text('AC')).text.style!;
     final TextStyle selectedIcon = _iconStyle(tester, Icons.ac_unit);
     final TextStyle unselectedIcon = _iconStyle(tester, Icons.access_alarm);
     expect(selectedFontStyle.fontSize, selectedFontStyle.fontSize);
     // Unselected label has a font size of 22 but is scaled down to be font size 21.
     expect(
-      tester.firstWidget<Transform>(find.ancestor(of: find.text('Alarm'), matching: find.byType(Transform))).transform,
+      tester.firstWidget<Transform>(findAlarmTransform).transform,
       equals(Matrix4.diagonal3(Vector3.all(unselectedTextStyle.fontSize! / selectedTextStyle.fontSize!))),
     );
     expect(selectedIcon.color, equals(selectedItemColor));
@@ -179,14 +193,8 @@ void main() {
     expect(_material(tester).elevation, equals(elevation));
     expect(_material(tester).color, equals(backgroundColor));
 
-    final Offset selectedBarItem = tester.getCenter(
-      find.ancestor(of: find.text('AC'),
-      matching: find.byType(Transform))
-    );
-    final Offset unselectedBarItem = tester.getCenter(
-      find.ancestor(of: find.text('Alarm'),
-      matching: find.byType(Transform))
-    );
+    final Offset selectedBarItem = tester.getCenter(findACTransform);
+    final Offset unselectedBarItem = tester.getCenter(findAlarmTransform);
     final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
     await gesture.addPointer();
     addTearDown(gesture.removePointer);
@@ -270,13 +278,27 @@ void main() {
       ),
     );
 
+    Finder findDescendantOfBottomNavigationBar(Finder finder) {
+      return find.descendant(
+        of: find.byType(BottomNavigationBar),
+        matching: finder,
+      );
+    }
+
     final TextStyle selectedFontStyle = tester.renderObject<RenderParagraph>(find.text('AC')).text.style!;
     final TextStyle selectedIcon = _iconStyle(tester, Icons.ac_unit);
     final TextStyle unselectedIcon = _iconStyle(tester, Icons.access_alarm);
     expect(selectedFontStyle.fontSize, selectedFontStyle.fontSize);
     // Unselected label has a font size of 22 but is scaled down to be font size 21.
     expect(
-      tester.firstWidget<Transform>(find.ancestor(of: find.text('Alarm'), matching: find.byType(Transform))).transform,
+      tester.firstWidget<Transform>(
+        findDescendantOfBottomNavigationBar(
+          find.ancestor(
+            of: find.text('Alarm'),
+            matching: find.byType(Transform),
+          ),
+        ),
+      ).transform,
       equals(Matrix4.diagonal3(Vector3.all(unselectedTextStyle.fontSize! / selectedTextStyle.fontSize!))),
     );
     expect(selectedIcon.color, equals(selectedItemColor));
@@ -285,22 +307,24 @@ void main() {
     expect(unselectedIcon.fontSize, equals(unselectedIconTheme.size));
     // There should not be any [Opacity] or [FadeTransition] widgets
     // since showUnselectedLabels and showSelectedLabels are true.
-    final Finder findOpacity = find.descendant(
-      of: find.byType(BottomNavigationBar),
-      matching: find.byType(Opacity),
+    final Finder findOpacity = findDescendantOfBottomNavigationBar(
+      find.byType(Opacity),
     );
-    final Finder findFadeTransition = find.descendant(
-      of: find.byType(BottomNavigationBar),
-      matching: find.byType(FadeTransition),
+    final Finder findFadeTransition = findDescendantOfBottomNavigationBar(
+      find.byType(FadeTransition),
     );
     expect(findOpacity, findsNothing);
     expect(findFadeTransition, findsNothing);
     expect(_material(tester).elevation, equals(elevation));
     expect(_material(tester).color, equals(backgroundColor));
 
     final Offset barItem = tester.getCenter(
-      find.ancestor(of: find.text('AC'),
-      matching: find.byType(Transform))
+      findDescendantOfBottomNavigationBar(
+        find.ancestor(
+          of: find.text('AC'),
+          matching: find.byType(Transform),
+        ),
+      ),
     );
     final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
     await gesture.addPointer();