フェード遷移 Fade Transition
画面が動かずに、前の画面が薄れて次の画面が浮かび上がる。いちばん控えめな遷移。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
※ 動画は動きが分かるよう 1/2 の速さです。「触ってみる」は実際の速さで動きます
別タブで大きく開く ↗どんなもの？
場所の移動を感じさせない、静かな切り替えです。スプラッシュからホームへ、ログイン後の画面へ、などに向きます。
PageRouteBuilder の transitionsBuilder で FadeTransition を返すだけで作れます。
「奥へ進む」「横へ移る」といった関係を伝えたいときは、スライドやズームのほうが分かりやすくなります。
こんなときに
- 起動直後やログイン後など、戻ることのない切り替え
- 動きを控えめにしたい画面
避けたい場面
- 一覧から詳細へ進む遷移（どこへ行ったか分かりにくい）
最小コード
Navigator.of(context).push(
PageRouteBuilder(
transitionDuration: const Duration(milliseconds: 300),
pageBuilder: (context, animation, secondaryAnimation) => const HomePage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) =>
FadeTransition(opacity: animation, child: child),
),
);使うウィジェット
PageRouteBuilderFadeTransition
似ているもの・一緒に見たいもの
画面遷移
Android 風ズームZoom Page Transition
次の画面が少しだけ拡大しながら現れ、前の画面も少し拡大しながら消えていく。Android 10 前後の標準の動き。
少し拡大しながら出る