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

Flutter

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

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

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www, グラフィック, フラットなデザイン

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

var _groupValue = 0;

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

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

StatefulBuilderは、ラジオボタンをタップした時に値が変わるようにするために使います。

StatefulBuilderを使わないと、画面が再描画出来ません。

次に、「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(() {}))」を追加しているのは、閉じた後に画面を再描画するためです。

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

では、サラダバー!

コメント

タイトルとURLをコピーしました