[Flutter]Checkbox(チェックボックス)をAlertDialog(アラートダイアログ)で使うには？

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

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

方法
まとめ

方法

CheckboxをAlertDialogで使う方法は２つあります。

StafulBuilder

１つは、StatefulBuilderを使う方法です。

具体的には、AlertDialogをStatefulBuilderの引数「builder」の戻り値にします。

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

これでCheckboxがAlertDialogで使えるようになります。

使用例

以下は、使用例です。

  var _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return StatefulBuilder(
                  builder: (context, setState) {
                    return AlertDialog(
                      content: Checkbox(
                        value: _isChecked,
                        onChanged: (value) {
                          setState(() {
                            _isChecked = !_isChecked;
                          });
                        },
                      ),
                    );
                  },
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }

StatefulWidget

もう１つは、StatefulWidgetを使う方法です。

具体的には、AlertDialog自体を別のStatefulWidgetにします。

class MyAlertDialog extends StatefulWidget {
  @override
  _MyAlertDialogState createState() => _MyAlertDialogState();
}

class _MyAlertDialogState extends State<MyAlertDialog> {

  @override
  Widget build(BuildContext context) {
    return AlertDialog(・・・);
  }
}

他のStatefulWidgetとして、AlertDialogを分離すれば、Checkboxが使えるようになります。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return MyAlertDialog();
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }
}

class MyAlertDialog extends StatefulWidget {
  @override
  _MyAlertDialogState createState() => _MyAlertDialogState();
}

class _MyAlertDialogState extends State<MyAlertDialog> {
  var _isChecked = false;
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Checkbox(
        value: _isChecked,
        onChanged: (value) {
          setState(() {
            _isChecked = !_isChecked;
          });
        },
      ),
    );
  }
}