すらぼうの開発ノート

モバイルアプリエンジニアのメモ

【Flutter】「ページを戻る機能」を無効化する方法

本エントリではデフォルトで実装される「ページを戻る機能」を無効化にする方法を説明する。

ページを戻る機能

Flutterのアプリではページ遷移を作成するとデフォルトで「ページを戻る機能」が実装される。

「ページを戻る機能」は

  • AppBarの左に表示される戻るボタン

  • 画面端から右スワイプスで戻る機能

の2種類が実装されている。それぞれ次のように動作する。

AppBarの戻るボタン

右スワイプで戻る機能

ページを戻る機能を無効化する方法

「ページを戻る機能」は一般的なので基本的にはこのままで良いのだが、場合によってはユーザーに前の画面に戻らせたくないケースがある。

そのようなケースでそれぞれの機能を無効化する方法を説明する。

「AppBarの左に表示される戻るボタン」を無効化する

AppBarにデフォルトで表示される戻るボタンは、automaticallyImplyLeadingfalseに指定すれば良い。

画面端から右スワイプスで戻る機能」を無効化する

WillPopScopeScaffoldをラップしてonWillPopfalseを返す関数を渡せば良い。

api.flutter.dev

WillPopScopeはFlutterにデフォルトで実装されている「ページを戻る機能」を制御するウィジェット

サンプルアプリの動作とコードを一部示す。

WillPopScopeを使用した際の動作

またWillPopScopeでラップしてonWillPopを上コードのように指定すると、AppBarの戻るボタンも無効化される。