9
2

More than 1 year has passed since last update.

[Flutter]WillPopScopeについて

Last updated at Posted at 2023-04-17

 今回は、Flutterフレームワークで提供されるウィジェットの一つである「WillPopScope」について紹介します。このウィジェットは、Androidデバイスのシステムボタンの「戻る」ボタンを押した時に発生する動作をカスタマイズするために使用されます。

 

簡単に使う理由についてまとめると
・アプリ内で戻るボタンを押したときの動作をカスタマイズできる。

WillPopScopeを効果的に使えるタイミング

パスワード入力画面での戻るボタンの無効化
→パスワードを入力する画面では、誤って戻るボタンを押してしまうと入力したパスワードがクリアされ、再度入力する必要があります。このような場合、WillPopScopeを使用することで戻るボタンを無効にすることができます。

フォームの編集内容の保存確認
→フォームを編集中に誤って戻るボタンを押してしまうと、編集した内容が失われてしまいます。このような場合、WillPopScopeを使用することで、編集内容を保存するかどうかの確認のためのダイアログを出すことができます。

アプリの終了確認
→最初の画面などで誤って戻るボタンを押してしまうとアプリが閉じてしまいます。このような場合、WillPopScopeを使用することで、戻る動作の無効化やアプリを終了するかどうかのダイアログを出すことができます。

WillPopScopeを使用したサンプルコード

例えば、以下のようなコードを使用することで、戻るボタンを押しても画面が戻らないようにすることができます。こちらのコードで確かめるには、Androidのシュミレーターなどで確かめてみると、確認できると思います。

class SamplePage extends StatelessWidget {
  const SamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: WillPopScope(
        onWillPop: () async {
          //falseにすると、戻るボタンの動作が無効になる。
          return false;
        },
        child: const Center(
          child: Text("Hello, world!"),
        ),
      ),
    );
  }
}

ちなみに、試してみた動画はこちらになります。

最後に

この機能の実装はAndroidでは特に重要になっていくと思います。そのため知っておくと便利だと思います。
考え方によっては色々な実装ができそうでいいですね。

9
2
0

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
9
2