Create new page transition for M3 #158881

QuncCccccc · 2024-11-13T20:26:40Z

This PR is to add a new page transition for Material 3.

The new builder matches the latest Android page transition behavior; while the new page slides in from right to left, it fades in at the same time and the old page slides out from right to left, fading out at the same time. When both pages are fading in/out, the black background might show up, so I added a ColoredBox for the slides-out page whose color defaults to ColorScheme.surface. The backgroundColor property can be used to customize the default transition color.

This demo shows the forward and backward behaviors.

page_transition.mov

Fixes: #142352

Pre-launch Checklist

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

MitchellGoodwin

Looks really good on a first pass! I'm wondering about migrating to this new transition being the default though. I think some of the Google testing might be difficult to adjust in one go.

examples/api/lib/widgets/heroes/hero.1.dart

MitchellGoodwin · 2024-11-19T23:46:56Z

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

+    final TargetPlatform platform = Theme.of(context).platform;
+    final PageTransitionsTheme pageTransitionsTheme = Theme.of(context).pageTransitionsTheme;
+    final PageTransitionsBuilder? pageTransitionBuilder = pageTransitionsTheme.builders[platform];
+    return pageTransitionBuilder is FadeForwardsPageTransitionsBuilder


Should the duration be a property of the page transition builders? If we add more transitions, I could see this continuing to be an issue.

Updated! Thanks!

MitchellGoodwin · 2024-11-19T23:51:12Z

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


  static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
-    TargetPlatform.android: ZoomPageTransitionsBuilder(),
+    TargetPlatform.android: FadeForwardsPageTransitionsBuilder(),


Should we make this transition the default right away? I'm guessing this is what's breaking Google testing.

You are right. The google testing failures are related to the updated behaviors like the duration change and the added ColoredBox. Maybe we can use useMaterial3 to control the default? But it also defaults to true now so using it won't fix the google testing. A migration guide and an announcement are probably also needed:)

Could we maybe add the builder as an option in this PR but not make it the default? Then put out an announcement that we are going to transfer over to this new transition being the default, and if they want to opt out ahead of time they can set the zoom transition as their default in their theme. Then they could either, switch to using it early and migrate their tests themselves, explicitly set the zoom transition builder in their themes for all platforms needed, or let it merge later and break their tests, but they'll have warning.

Sounds good. I think this can help land the change in a soft breaking manner😄! Let me separate this PR.

chunhtai

overal LGTM,

I also vaguely remember @jonahwilliams mentioned some performance issue with old transition. will the issue still persist after the change?

chunhtai · 2024-11-20T18:24:51Z

examples/api/lib/material/page_transitions_theme/page_transitions_theme.3.dart

+      theme: ThemeData(
+        pageTransitionsTheme: PageTransitionsTheme(
+          builders: Map<TargetPlatform, PageTransitionsBuilder>.fromIterable(
+            TargetPlatform.values, value: (_) => const FadeForwardsPageTransitionsBuilder()


in example page_transition_theme.0.dart, there was a comment said the default is FadeForwardsPageTransitionsBuilder if not specify, is this override needed?

If not specify, I think on iOS and macOS platforms, it will default to CupertinoPageTransitionsBuilder(), and in this example, I just wanted to show the new page transition, so I just override everything. Do you think if this is necessary?

Then I think the comment in page_transition_theme.0.dart should be updated as the default may not always be FadeForwardsPageTransitionsBuilder when unspecified.

chunhtai · 2024-11-20T18:25:49Z

examples/api/lib/material/page_transitions_theme/page_transitions_theme.3.dart

+
+import 'package:flutter/material.dart';
+
+/// Flutter code sample for [PageTransitionsTheme].


This can use some more explanation. I assume this is to show case the new material transition?

Yes, just updated! Thanks!

chunhtai · 2024-11-20T18:28:57Z

examples/api/test/widgets/transitions/slide_transition.0_test.dart

    expect(find.byType(FlutterLogo), findsOneWidget);
    expect(find.byType(Padding), findsAtLeast(1));
-    expect(find.byType(SlideTransition), findsOneWidget);
+    expect(find.byType(SlideTransition), findsAtLeast(1));


Why this change?

The new page transition also uses SlideTransition, so there are more than one in this example.

chunhtai · 2024-11-20T18:32:17Z

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

+    final TargetPlatform platform = Theme.of(context).platform;
+    final PageTransitionsTheme pageTransitionsTheme = Theme.of(context).pageTransitionsTheme;
+    final PageTransitionsBuilder? pageTransitionBuilder = pageTransitionsTheme.builders[platform];
+    return pageTransitionBuilder is FadeForwardsPageTransitionsBuilder


chunhtai · 2024-11-20T18:37:59Z

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

  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    final PageTransitionsTheme theme = Theme.of(context).pageTransitionsTheme;
+    final Duration duration = _getTransitionDuration(context);
+    controller?.duration = duration;


After I thinking about it more, I think it should be done in TransitionRoute.didPush and didPop() to update the duration and reverseDuration directly right before forward() and reverse() is called.

That way you don't need this logic here

Updated! Thanks!

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

chunhtai · 2024-11-20T19:00:24Z

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

+  /// helps avoid a black background between two page.
+  ///
+  /// Defaults to [ColorScheme.surface]
+  final Color? backgroundColor;


Do we have use case where people want to set a different color other than surface? it seems whichever color they pick will cause a color flash

I think so! If the page has its own color(not ColorScheme.surface), changing the backgroundColor to the same color can avoid the color flash. I noticed this problem in page_transition_theme.0.dart, the two pages has their own Scaffold.backgroundColor, the first page has blueGrey as its background, so if we want to use the new builder and no color flash, we should also set the background color to Colors.blueGrey.

chunhtai · 2024-11-20T19:07:04Z

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

+///    that's similar to the one provided by Android O.
+///  * [OpenUpwardsPageTransitionsBuilder], which defines a page transition
+///    that's similar to the one provided by Andoird P.
+///  * [ZoomPageTransitionsBuilder], which defines the default page transition


If we are going to keep the old transition, have we thought about having android version as part of theme? for example

ThemeData.androidVersion, and then based on version we build different default pagetransition

I actually think we should not encourage users to use the old page transitions and should deprecate those in the future, as they are already outdated:)

jonahwilliams · 2024-11-20T19:10:09Z

The performance problem was due to the scaling factor which is absent from this transition AFAIK.

examples/api/lib/widgets/heroes/hero.1.dart

chunhtai · 2024-11-21T20:30:27Z

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


+  @override
+  TickerFuture didPush() {
+    controller?.duration = transitionDuration;


not in this class, I meant in TransitionRoute class directly

flutter/packages/flutter/lib/src/widgets/routes.dart

Line 291 in d7f5547

TickerFuture didPush() {

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

chunhtai

LGTM

MitchellGoodwin

LGTM!

MitchellGoodwin · 2024-11-22T19:14:08Z

packages/flutter/test/material/page_transitions_theme_test.dart

+    await tester.tap(find.text('pop'));
+    await tester.pump(const Duration(milliseconds: 299));
+    expect(find.text('page b'), findsOneWidget);
+    expect(find.byType(ColoredBox), findsNothing); // ColoredBox doesn't exist in CupertinoPageTransition.


Nit: Should this comment say FadeUpwardsPageTransition instead?

Ah thanks for catching this! Updated:)

QuncCccccc · 2024-11-22T20:19:46Z

Oh seems the last commit caused some test failures related to bottom sheet animation. Taking a look.

…e transition. (flutter/engine#56762) For flutter#158881 The new Android m3 page transition animates a saveLayer w/ opacity + slide in animation. See example video from linked PR: https://github.com/user-attachments/assets/1382374a-4e0c-4a0e-9d70-948ce12e6298 On each frame, we intersect the coverage rect of this saveLayer contents with the screen rect, and shrink it to a partial rectangle. But this changes each frame, which forces us to re-allocate a large texture each frame, causing performance issues. Why not ignore the cull rect entirely? We sometimes ignore the cull rect for the image filter layer for similar reasons, but from observation, the sizes of these saveLayer can be slightly larger than the screen for flutter gallery. Instead, I attempted to use the cull rect size to shrink the saveLayer by shifting the origin before intersecting. I think this should be safe to do, as I believe it could only leave the coverage as larger than it would have been and not smaller.

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Nov 13, 2024

QuncCccccc force-pushed the page_transition branch from 14ab1a1 to d382146 Compare November 17, 2024 01:09

QuncCccccc marked this pull request as ready for review November 19, 2024 20:55

QuncCccccc requested review from MitchellGoodwin and chunhtai November 19, 2024 20:55

MitchellGoodwin reviewed Nov 20, 2024

View reviewed changes

chunhtai reviewed Nov 20, 2024

View reviewed changes

github-actions bot removed a: tests "flutter test", flutter_test, or one of our tests a: text input Entering text in a text field or keyboard related problems f: scrolling Viewports, list views, slivers, etc. f: routes Navigator, Router, and related APIs. labels Nov 21, 2024

QuncCccccc changed the title ~~Update Android default page transition~~ Create new page transition for M3 Nov 21, 2024

QuncCccccc requested review from MitchellGoodwin and chunhtai November 21, 2024 02:20

chunhtai reviewed Nov 21, 2024

View reviewed changes

github-actions bot added the f: routes Navigator, Router, and related APIs. label Nov 22, 2024

chunhtai approved these changes Nov 22, 2024

View reviewed changes

MitchellGoodwin approved these changes Nov 22, 2024

View reviewed changes

jonahwilliams mentioned this pull request Nov 22, 2024

[Impeller] better handle allocation herustics of Android slide in page transition. flutter/engine#56762

Merged

QuncCccccc force-pushed the page_transition branch 2 times, most recently from 4b041d6 to e14ddbf Compare November 25, 2024 22:13

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 9, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

bbd0f5d

engine-flutter-autoroll mentioned this pull request Dec 9, 2024

Roll Flutter from ab5b20c16d56 to 5f861d5bf726 (39 revisions) flutter/packages#8254

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 9, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

1d03fd7

engine-flutter-autoroll mentioned this pull request Dec 10, 2024

Manual roll Flutter from ab5b20c16d56 to 129a35a5e186 (49 revisions) flutter/packages#8257

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 10, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

a3bf942

engine-flutter-autoroll mentioned this pull request Dec 10, 2024

Roll Flutter from ab5b20c16d56 to 2eee054d41f6 (53 revisions) flutter/packages#8258

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 10, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

6a0ec5a

engine-flutter-autoroll mentioned this pull request Dec 10, 2024

Roll Flutter from ab5b20c16d56 to 4b1430841359 (54 revisions) flutter/packages#8259

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 10, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

bd9e3eb

engine-flutter-autoroll mentioned this pull request Dec 10, 2024

Roll Flutter from ab5b20c16d56 to a5feed55157a (55 revisions) flutter/packages#8260

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 10, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

9e1fa5d

engine-flutter-autoroll mentioned this pull request Dec 10, 2024

Roll Flutter from ab5b20c16d56 to 953208752eb5 (56 revisions) flutter/packages#8261

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 10, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

a22dac7

engine-flutter-autoroll mentioned this pull request Dec 10, 2024

Manual roll Flutter from ab5b20c16d56 to 953208752eb5 (56 revisions) flutter/packages#8262

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 10, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

b824174

engine-flutter-autoroll mentioned this pull request Dec 11, 2024

Roll Flutter from 456366232af9 to 4397f43d37ab (59 revisions) flutter/packages#8271

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 11, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

8d1e938

engine-flutter-autoroll mentioned this pull request Dec 11, 2024

Roll Flutter from 456366232af9 to 4397f43d37ab (59 revisions) flutter/packages#8272

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 11, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

8d7fb7c

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Dec 11, 2024

92107b1 Create new page transition for M3 (flutter/flutter#158881)

8664ff7

reidbaker mentioned this pull request Dec 13, 2024

Cutout rotation integration test #160255

Closed

11 tasks

maheshj01 mentioned this pull request Jan 14, 2025

The new FadeForwardsPageTransitionsBuilder breaks when called from ModalRoute #161511

Closed

justinmc mentioned this pull request Jan 23, 2025

Support Material 3 motion - Transitions #116526

Open

2 tasks

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 12, 2025

92107b1 Create new page transition for M3 (flutter/flutter#158881)

bee3470

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025

92107b1 Create new page transition for M3 (flutter/flutter#158881)

f8b1a2a

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025

92107b1 Create new page transition for M3 (flutter/flutter#158881)

ef42544

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 6, 2025

92107b1 Create new page transition for M3 (flutter/flutter#158881)

7dba900

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 7, 2025

92107b1 Create new page transition for M3 (flutter/flutter#158881)

b478d23

victorsanni mentioned this pull request Nov 12, 2025

refactor: migrate FadeForwardsPageTransitionsBuilder to widgets #177428

Closed

9 tasks


		import 'package:flutter/material.dart';

		/// Flutter code sample for [PageTransitionsTheme].

Create new page transition for M3 #158881

Create new page transition for M3 #158881

Uh oh!

Conversation

QuncCccccc commented Nov 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

MitchellGoodwin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chunhtai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Nov 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Nov 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jonahwilliams commented Nov 20, 2024

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chunhtai left a comment

Choose a reason for hiding this comment

Uh oh!

MitchellGoodwin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc commented Nov 22, 2024

Uh oh!

QuncCccccc commented Nov 13, 2024 •

edited

Loading

QuncCccccc Nov 21, 2024 •

edited

Loading

QuncCccccc Nov 21, 2024 •

edited

Loading