[Flutter]ModalBottomSheet(モーダルボトムシート)でsetStateを使うには？

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

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

方法

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

具体的には、ModalBottomSeetとして表示するウェジェットをStatefulBuilderの引数「builder」でreturnするようにします。

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

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

これでModalBottomSheetで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'),
        ),
      ),
    );
  }