iOS 風プッシュ Cupertino Page Transition
次の画面が右から滑り込み、前の画面は少しだけ左へずれて暗くなる。iPhone のアプリでおなじみの動き。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
※ 動画は動きが分かるよう 1/2 の速さです。「触ってみる」は実際の速さで動きます
別タブで大きく開く ↗どんなもの？
iOS の標準の画面遷移です。前の画面が完全に消えず少しずれて残ることで、「奥へ進んだ」感じが出ます。
iPhone では画面の左端から右へスワイプすると、指に合わせて前の画面へ戻れます。
CupertinoPageRoute で画面を開くか、テーマの pageTransitionsTheme に CupertinoPageTransitionsBuilder を
登録すると、MaterialPageRoute のままでも Android を含めてこの動きにできます。
こんなときに
- 一覧から詳細へ「1段深く進む」遷移
- iOS らしい操作感にそろえたい
避けたい場面
- 階層の関係がない画面同士の切り替え（タブの切り替えなど。フェードスルーが合う）
最小コード
// 1つの画面だけ
Navigator.of(context).push(
CupertinoPageRoute(builder: (_) => const DetailPage()),
);
// アプリ全体で、すべての OS をこの動きにそろえる
MaterialApp(
theme: ThemeData(
pageTransitionsTheme: const PageTransitionsTheme(builders: {
TargetPlatform.android: CupertinoPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
}),
),
)使うウィジェット
CupertinoPageRouteCupertinoPageTransitionsBuilder