個人開発者が勉強がてらまとめているだけのサイトです

フェードフォワード Fade Forwards Page Transition

次の画面が右から少しだけ入りながらフェードで現れ、前の画面は左へ少しずれながら消える。最近の Android の動き。

別名
Android 14 の画面遷移新しい Android の遷移スライドしながらフェードFadeForwards
動き
右から少し入るフェードで入れ替わる
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の 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 前後の標準の動き。

少し拡大しながら出る
触ってみる ↗
画面遷移 iOS 風プッシュCupertino Page Transition

次の画面が右から滑り込み、前の画面は少しだけ左へずれて暗くなる。iPhone のアプリでおなじみの動き。

右から入る
触ってみる ↗
画面遷移 予測型「戻る」Predictive Back

戻るジェスチャーの途中で今の画面が縮み、後ろに前の画面がのぞく。離せば戻り、やめれば元に戻る。

引くと画面が縮む