Page transitions replaced by ZoomPageTransitionsBuilder

In order to ensure that libraries follow the latest OEM behavior, the default page transition builders now use ZoomPageTransitionsBuilder on all platforms (excluding iOS and macOS) instead of FadeUpwardsPageTransitionsBuilder.

The FadeUpwardsPageTransitionsBuilder (provided with the first Flutter release), defined a page transition that's similar to the one provided by Android O. This page transitions builder will eventually be deprecated on Android, as per Flutter's deprecation policy.

ZoomPageTransitionsBuilder, the new page transition builder for Android, Linux, and Windows, defines a page transition that's similar to the one provided by Android Q and R.

According to the Style guide for Flutter repo, the framework will follow the latest OEM behavior. Page transition builders using FadeUpwardsPageTransitionsBuilder are all switched to the ZoomPageTransitionsBuilder. When the current TargetPlatform doesn't have PageTransitionsBuilder defined in the ThemeData.pageTransitionsTheme, ZoomPageTransitionsBuilder is used as the default.

PageTransitionsBuilders defined in PageTransitionsTheme._defaultBuilders have changed from FadeUpwardsPageTransitionsBuilder to ZoomPageTransitionsBuilder for TargetPlatform.android, TargetPlatform.linux and TargetPlatform.windows.

If you want to switch back to the previous page transition builder (FadeUpwardsPageTransitionsBuilder), you should define builders explicitly for the target platforms.

Code before migration:

MaterialApp(
  theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
)

Code after migration:

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: const PageTransitionsTheme(
      builders: <TargetPlatform, PageTransitionsBuilder>{
        TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(), // Apply this to every platforms you need.
      },
    ),
  ),
)

If you want to apply the same page transition builder to all platforms:

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

If you used to try to find widgets but failed with Too many elements using the new transition, and saw errors similar to the following:

══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following StateError was thrown running a test:
Bad state: Too many elements

When the exception was thrown, this was the stack:
#0      Iterable.single (dart:core/iterable.dart:656:24)
#1      WidgetController.widget (package:flutter_test/src/controller.dart:69:30)
#2      main.<anonymous closure> (file:///path/to/your/test.dart:1:2)

You should migrate your tests by using the descendant scope for Finders with the specific widget type. Below is the example of DataTable's test:

Test before migration:

final Finder finder = find.widgetWithIcon(Transform, Icons.arrow_upward);

Test after migration:

final Finder finder = find.descendant(
  of: find.byType(DataTable),
  matching: find.widgetWithIcon(Transform, Icons.arrow_upward),
);

Widgets that typically need to migrate the finder scope are: Transform, FadeTransition, ScaleTransition, and ColoredBox.

Landed in version: 2.13.0-1.0.pre
In stable release: 3.0.0

API documentation:

• ZoomPageTransitionsBuilder
• FadeUpwardsPageTransitionsBuilder
• PageTransitionsTheme

Relevant issues:

• Issue 43277

Relevant PR:

• PR 100812

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-06-01. View source or report an issue.