予測型「戻る」 Predictive Back

戻るジェスチャーの途中で今の画面が縮み、後ろに前の画面がのぞく。離せば戻り、やめれば元に戻る。

別名: プレディクティブバック戻るジェスチャーのプレビュー戻る前にのぞくPredictive Back Gesture
動き: 引くと画面が縮む前の画面がのぞく離すと戻る
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

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

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

別タブで大きく開く ↗

どんなもの？

Android 14 以降で使える「戻る前に、どこへ戻るかを見せる」動きです。戻りすぎの事故を防げます。

Flutter 3.47 時点では Android の既定の遷移が PredictiveBackPageTransitionsBuilder なので、MaterialPageRoute を使うだけで対応します

（古い Flutter では、テーマの pageTransitionsTheme に自分で登録します）。

Android のバージョンや targetSdk によっては、AndroidManifest.xml の application に

android:enableOnBackInvokedCallback="true" を付けないとジェスチャーが届きません。

実際の動きは Android の戻るジェスチャーでしか出ないため、このデモは見た目を再現したものです

（画面の左端から右へドラッグすると、同じように縮んで前の画面がのぞきます）。

こんなときに

Android アプリで、最新の戻る操作の体験に合わせたい

避けたい場面

戻る操作を独自のボタンだけで済ませる設計（ジェスチャーとかみ合わない）

最小コード

// 古い Flutter や、明示しておきたい場合のテーマ設定
MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: const PageTransitionsTheme(builders: {
      TargetPlatform.android: PredictiveBackPageTransitionsBuilder(),
    }),
  ),
)

// android/app/src/main/AndroidManifest.xml
// <application android:enableOnBackInvokedCallback="true" ...>