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

Android 風ズーム Zoom Page Transition

次の画面が少しだけ拡大しながら現れ、前の画面も少し拡大しながら消えていく。Android 10 前後の標準の動き。

別名
ズーム遷移拡大して開くAndroid 10 の画面遷移Zoom Transition
動き
少し拡大しながら出る前の画面も少し拡大して消える
作り方
標準ウィジェット Flutter に入っているものだけで作れます

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

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

別タブで大きく開く ↗

どんなもの?

Android 10 で採用された画面遷移で、長く Flutter の Android 向けの既定でした。

横に滑らず、その場で奥から手前に出てくるような動きです。

テーマの pageTransitionsTheme に ZoomPageTransitionsBuilder を登録すると、MaterialPageRoute の遷移がこの動きになります。

Flutter 3.47 時点の Android の既定は予測型「戻る」(普段の遷移はフェードフォワードの動き)なので、この動きにしたいときは明示的に指定します。

こんなときに

  • Android らしい操作感にしたい

避けたい場面

  • iOS のユーザーが中心のアプリ(右からのスライドに慣れているので違和感が出やすい)

最小コード

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: const PageTransitionsTheme(builders: {
      TargetPlatform.android: ZoomPageTransitionsBuilder(),
    }),
  ),
)

使うウィジェット

ZoomPageTransitionsBuilderPageTransitionsTheme

似ているもの・一緒に見たいもの

触ってみる ↗
画面遷移 フェードフォワードFade Forwards Page Transition

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

右から少し入る
触ってみる ↗
画面遷移 iOS 風プッシュCupertino Page Transition

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

右から入る
触ってみる ↗
画面遷移 コンテナトランスフォームContainer Transform

押したカードがその場でふくらみ、角を広げながら画面いっぱいの詳細画面に変わる。閉じるとカードに縮んで戻る。

カードがふくらむ