共有軸の遷移 Shared Axis Transition

手順を進むと画面が同じ向き（横・縦・奥）に送られ、戻ると逆向きに戻る。順番のある画面同士の関係が伝わる。

別名: シェアードアクシス横に進む遷移ステップ遷移奥行き遷移SharedAxisTransition
動き: 同じ向きに進む戻ると逆向き横・縦・奥
作り方: パッケージあり標準でも作れますが、pub.dev のパッケージを使うと早いです

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

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

別タブで大きく開く ↗

どんなもの？

Material Design のモーションの1つで、画面同士が「1本の軸の上に並んでいる」ことを伝えます。

会員登録の手順は横、一覧の上下の移動は縦、親から子へ降りるときは奥（拡大）、と軸を使い分けます。

animations パッケージの SharedAxisTransition を PageTransitionSwitcher と組み合わせ、

中身の key を変えるたびに切り替えます。戻るときは reverse: true で向きを逆にします。

画面遷移として使うなら SharedAxisPageTransitionsBuilder をテーマに登録します。

デモ上部で、横・縦・奥の3種類を切り替えて見比べられます。

こんなときに

会員登録やチュートリアルなど、順番に進む画面
前後関係のある画面同士（月ごとのカレンダーなど）

避けたい場面

関係のない画面同士の切り替え（フェードスルーが合う）

最小コード

PageTransitionSwitcher(
  reverse: goingBack, // 戻るときは逆向き
  transitionBuilder: (child, animation, secondaryAnimation) => SharedAxisTransition(
    animation: animation,
    secondaryAnimation: secondaryAnimation,
    transitionType: SharedAxisTransitionType.horizontal, // vertical / scaled
    child: child,
  ),
  child: StepPage(key: ValueKey(step), step: step),
)