フェードスルー Fade Through

今の画面が先に消えきってから、次の画面が少し拡大しながら現れる。関係のない画面同士の切り替えに使う。

別名: タブ切り替えの遷移一度消えてから出るFadeThroughTransitionFade Through Transition
動き: 一度消える少し拡大しながら出る
作り方: パッケージあり標準でも作れますが、pub.dev のパッケージを使うと早いです

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

※ 動画は動きが分かるよう 1/2 の速さです。「触ってみる」は実際の速さで動きます

別タブで大きく開く ↗

どんなもの？

Material Design のモーションの1つです。ボトムナビゲーションのタブ切り替えのように、

前後関係のない画面同士を入れ替えるときに、「場所の移動」を感じさせずに切り替えます。

クロスフェードと違い、2つの画面が重なって見える瞬間がないので、ごちゃっとしません。

animations パッケージの FadeThroughTransition を PageTransitionSwitcher と組み合わせます。

こんなときに

ボトムナビゲーションのタブの切り替え
関係のない画面同士の入れ替え

避けたい場面

一覧から詳細へ進むなど、前後関係がある遷移（共有軸や Hero のほうが伝わる）

最小コード

Scaffold(
  body: PageTransitionSwitcher(
    transitionBuilder: (child, animation, secondaryAnimation) => FadeThroughTransition(
      animation: animation,
      secondaryAnimation: secondaryAnimation,
      child: child,
    ),
    child: pages[index], // 各ページに別々の key を付ける
  ),
  bottomNavigationBar: NavigationBar(...),
)