フェードフォワード Fade Forwards Page Transition
次の画面が右から少しだけ入りながらフェードで現れ、前の画面は左へ少しずれながら消える。最近の Android の動き。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
※ 動画は動きが分かるよう 1/2 の速さです。「触ってみる」は実際の速さで動きます
別タブで大きく開く ↗どんなもの?
Android 14 以降の標準の画面遷移に合わせた動きです。iOS ほど大きく滑らず、ズームより方向が分かりやすいのが特徴です。
Flutter 3.47 時点の Android の既定(予測型「戻る」の PredictiveBackPageTransitionsBuilder)は、
戻るジェスチャー以外の普段の遷移でこの動きを使うので、Android では MaterialPageRoute を使うだけで出ます。
ほかの OS でもこの動きにそろえたいときは、テーマの pageTransitionsTheme に FadeForwardsPageTransitionsBuilder を登録します。
こんなときに
- 最近の Android の操作感に合わせたい
避けたい場面
- iOS のユーザーが中心のアプリ(iOS 風プッシュのほうが自然)
最小コード
MaterialApp(
theme: ThemeData(
pageTransitionsTheme: const PageTransitionsTheme(builders: {
TargetPlatform.android: FadeForwardsPageTransitionsBuilder(),
}),
),
)使うウィジェット
FadeForwardsPageTransitionsBuilderPageTransitionsTheme
似ているもの・一緒に見たいもの
画面遷移
Android 風ズームZoom Page Transition
次の画面が少しだけ拡大しながら現れ、前の画面も少し拡大しながら消えていく。Android 10 前後の標準の動き。
少し拡大しながら出る