某Webアプリ、スマホアプリ開発の企業に勤めているエンジニアの日記です。主に、技術系記事や本の要約を発信します。

【Flutter】CupertinoPageRouteで前画面に戻るときだけスワイプ可能にする

やりたいこと

iOSアプリでよく見る、前画面に戻る際にスワイプで戻れるようにしたい。

ただし、前画面に戻る以外の画面遷移はスワイプしないようにする。

解決策

  1. CupertinoPageRouteクラスを作成

    ※引数がいくつか入っていますが、適宜変更してください

  2. CupertinoPageRouteにDurationを設定

  3. 次の画面に進む処理を0秒に設定
  4. クラスを任意の画面遷移処理の部分で呼び出す
// スワイプバック可能にする
class MyCupertinoPageRoute<T> extends CupertinoPageRoute<T> {
  MyCupertinoPageRoute({ WidgetBuilder builder, RouteSettings settings })
    : super(builder: builder, settings: settings);
  
  // 次の画面に進む処理
  @override
  Duration get transitionDuration => const Duration(seconds: 0);

  // 前の画面に戻る処理
  @override
  Duration get reverseTransitionDuration => const Duration(seconds: 1);
}

実際は全ての画面遷移時にもスワイプしてますが、遷移時間を0秒にすることで

スワイプには見えない処理にすることができました。

もっと良い方法があればぜひ教えて下さい。。。

参考サイト

https://api.flutter.dev/flutter/material/MaterialRouteTransitionMixin/transitionDuration.html

https://medium.com/flutterdevs/page-transitions-in-flutter-5236a8afae92