Page transitions replaced by ZoomPageTransitionsBuilder
Summary
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
.
Context
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.
Description of change
PageTransitionsBuilder
s defined in
PageTransitionsTheme._defaultBuilders
have changed from
FadeUpwardsPageTransitionsBuilder
to
ZoomPageTransitionsBuilder
for TargetPlatform.android
,
TargetPlatform.linux
and TargetPlatform.windows
.
Migration guide
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(primarySwatch: Colors.blue),
)
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(),
),
),
),
)
Tests migration
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 Finder
s 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
.
Timeline
Landed in version: v2.13.0-1.0.pre
In stable release: v3.0.0
References
API documentation:
Relevant issues:
Relevant PR: