[Flutter]AlertDialogの画面(screen)を再描画(redraw)する方法

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

AlertDialogの画面を再描画する方法を紹介します。

方法

まず、AlertDialogをStatefulBuilderでラップします。

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

そして、再描画したいタイミングで、「setState」を呼び出します。

return StatefulBuilder(
  builder: (BuildContext context, StateSetter setState) {
    return AlertDialog(
      actions: [
        TextButton(
          onPressed: () {
            setState(() {});
          },
          child: Text('Redraw'),
        )
      ],
    );
  },
);

以下は、実際の使用例です。

showDialog(
  context: context,
  builder: (BuildContext context) {
    var _count = 0;
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState) {
        return AlertDialog(
          title: Text('Alert'),
          content: Text('count : $_count'),
          actions: [
            TextButton(
              onPressed: () {
                setState(() {
                  _count++;
                });
              },
              child: Text('Plus'),
            )
          ],
        );
      },
    );
  },
);