[Flutter]ModalBottomSheet(モーダルボトムシート)で画面(screen)を再描画(rerender)するには？

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

ModalBottomSheetで画面を再描画する方法を紹介します。

方法

ModalBottomSheetで画面を再描画するには、StatefulBuilderを使います。

まず、StatefulBuilderをshowModalBottomSheetの引数「builder」でreturnします。

次に、StatefulBuilderの第１引数に「context」、第２引数に「builder」として「(context, StateSetter setState){}」を指定します。

そして、StatefulBuilderの引数「builder」でModalBottomSheetで表示するウェジェットをreturnします。

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

あとは、setState関数を呼び出すことで画面を再描画できます。

setState((){}) //再描画

以下は、使用例です。

使用例

  var _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return StatefulBuilder(
                  builder: (context, StateSetter setState) {
                    return Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text('$_count'),
                          TextButton(
                            onPressed: () {
                              setState(() {
                                _count++;
                              });
                            },
                            child: Text('Increment'),
                          )
                        ],
                      ),
                    );
                  },
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }