[Flutter]AlertDialogでラジオボタンを使う方法

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

AlertDialogでラジオボタンを使う方法を紹介します。

方法

AlertDialogでラジオボタンを使うには、まずStatefulWidgetで、変数を用意します。

var _groupValue = 0;

そして、引数「content」に「StatefulBuilder」を指定します。

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

次に、「StatefulBuilder」にラジオボタンを実装します。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      content: StatefulBuilder(
        builder:
            (BuildContext context, StateSetter setState) =>
                Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RadioListTile(
              value: 0,
              groupValue: _groupValue,
              title: Text('Zero'),
              onChanged: (int? value) {
                setState(() {
                  _groupValue = value!;
                });
              },
            ),
            RadioListTile(
              value: 1,
              groupValue: _groupValue,
              title: Text('One'),
              onChanged: (int? value) {
                setState(() {
                  _groupValue = value!;
                });
              },
            ),
            RadioListTile(
              value: 2,
              groupValue: _groupValue,
              title: Text('Two'),
              onChanged: (int? value) {
                setState(() {
                  _groupValue = value!;
                });
              },
            ),
          ],
        ),
      ),
    );
  },
)

通常のラジオボタンと同じように実装します。

最後に、「showDialog」の後ろに「.then((value)=>setState(() {}))」を追加します。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      content: StatefulBuilder(
        builder:
            (BuildContext context, StateSetter setState) =>
                Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RadioListTile(
              value: 0,
              groupValue: _groupValue,
              title: Text('Zero'),
              onChanged: (int? value) {
                setState(() {
                  _groupValue = value!;
                });
              },
            ),
            RadioListTile(
              value: 1,
              groupValue: _groupValue,
              title: Text('One'),
              onChanged: (int? value) {
                setState(() {
                  _groupValue = value!;
                });
              },
            ),
            RadioListTile(
              value: 2,
              groupValue: _groupValue,
              title: Text('Two'),
              onChanged: (int? value) {
                setState(() {
                  _groupValue = value!;
                });
              },
            ),
          ],
        ),
      ),
    );
  },
).then((value) => setState(() {}));

全体のコード

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _groupValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Selected Value : $_groupValue'),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      content: StatefulBuilder(
                        builder: (BuildContext context, StateSetter setState) =>
                            Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            RadioListTile(
                              value: 0,
                              groupValue: _groupValue,
                              title: Text('Zero'),
                              onChanged: (int? value) {
                                setState(() {
                                  _groupValue = value!;
                                });
                              },
                            ),
                            RadioListTile(
                              value: 1,
                              groupValue: _groupValue,
                              title: Text('One'),
                              onChanged: (int? value) {
                                setState(() {
                                  _groupValue = value!;
                                });
                              },
                            ),
                            RadioListTile(
                              value: 2,
                              groupValue: _groupValue,
                              title: Text('Two'),
                              onChanged: (int? value) {
                                setState(() {
                                  _groupValue = value!;
                                });
                              },
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ).then((value) => setState(() {}));
              },
              child: Text('Button'),
            )
          ],
        ),
      ),
    );
  }
}

補足

StatefulBuilderを使わずに、ラジオボタンを実装すると値が変わりません。

これはsetStateが機能していないからです。

setStateは最も近いStatefulWidgetの画面を再描画します。

なので、AlertDialogの画面は再描画しないのです。

そこで登場するのが、StatefulBuilderです。

StatefulBuilderの引数「builder」の引数「StateSetter setState」で、AlertDialogを再描画するようにします。

また、「then((value) => setState(() {}))」を追加しているのは、閉じた後に画面を再描画するためです。

ここまで読んでいただきありがとうございます。

では、サラダバー！