4
2

More than 3 years have passed since last update.

Flutterで普通のスワイプで画面をpopする

Last updated at Posted at 2021-03-17

FlutterでNavigator.push(context)して遷移した先の画面で元の画面に戻るときにはNavigator.pop(context)をアイコンに設置したりエッジスワイプしたりしますよね。
通常のスワイプでも戻したかったのでやり方を見つけるのに少々苦労しましたがなんとかできました。

GestureDetector(
  onHorizontalDragUpdate: (details) {
    if (details.delta.dx > 18) {
      Navigator.pop(context);
    }
  },
  child: ・・・,
);

このようにGestureDetector.onHorizontalDragUpdateを設定して横方向のスワイプをトリガーにnavigator.pop(context)を実行するようにしました。
details.delta.dxはスワイプの速度で、正の向きが左→右です。しきい値として設定した18を超えるとnavigator.pop(context)を実行します。この値は実機で触りながら調整しました。

参考

Flutter公式ドキュメント onHorizontalDragUpdate
https://api.flutter.dev/flutter/widgets/GestureDetector/onHorizontalDragUpdate.html

4
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2