[Flutter]AppBarの戻るボタン(back button)にイベント(event)を追加するには？

どうも、ちょげ(@chogetarou)です。

AppBarの戻るボタンにイベントを追加するには、どうしたら良いのでしょうか？

方法

戻るボタンにイベントを追加するには、「WillPopScope」を使います。

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _backButtonPress(context),  //戻るボタンのイベント
      child: Scaffold(
          appBar: AppBar(
            title: Text('Sample'),
          ),
          body: Center(
            ・・・
          )
       ),
    );
  }

WillPopScopeの引数「onWillPop」で、戻るボタンを押した時のイベントを指定できます。

厳密には、「WillPopScope」で追加するイベントは、ページを閉じる時に呼ばれます。

ここでは、次のようなイベントを指定しています。

  Future<bool> _backButtonPress(BuildContext context) async {
    bool? answer = await showDialog<bool>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('Dialog'),
            actions: [
              TextButton(
                  onPressed: () {
                    Navigator.of(context).pop(false);
                  },
                  child: Text('No')),
              TextButton(
                  onPressed: () {
                    Navigator.of(context).pop(true);
                  },
                  child: Text('Yes'))
            ],
          );
        });

    return answer ?? false;
  }

onWillPopに指定する関数の戻り値は「Future<bool>」になっているので、それに合わせた型にします。

この関数を「onWillPop」に指定することで、戻るボタンを押した時にイベントを行うことが出来ます。

ここでは、WillPopScopeを使っていますが、戻るボタンを自作する方法もあります。

自作した戻るボタンであれば、戻るボタンのみにイベントを追加することが出来ます。