[Flutter]AlertDialogでsetStateを使うには？

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

AlertDialogでsetStateを使う方法を紹介します。

方法

AlertDialogでsetStateを使うには、StatefulBuilderを使います。

まず、AlertDialogをStatefulBuilderの引数「builder」の戻り値にします。

StatefulBuilder(
  builder: (context, StateSetter setState) {
    return AlertDialog();
  },
);

引数「builder」に指定する関数の引数は、「(context, StateSetter setState)」のようにします。

これでAlertDialogでsetStateを使えるようになります。

setStateは、直近のStatefulWidgetの画面を再描画します。

普通にAlertDialogでsetStateを使うと、直近のStatefulWidgetはAlertDialogを表示している画面になります。

なので、 StatefulBuilderで上書きします。

以下は、使用例です。

使用例

  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return StatefulBuilder(
                  builder: (context, StateSetter setState) {
                    return AlertDialog(
                      content: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text('$_count'),
                          TextButton(
                            onPressed: () {
                              setState(() {
                                _count++;
                              });
                            },
                            child: Text('Plus'),
                          )
                        ],
                      ),
                    );
                  },
                );
              },
            );
          },
          child: Text('Alert'),
        ),
      ),
    );
  }