[Flutter]AlertDialogでドロップダウンボタンを使う方法

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

AlertDialogでドロップダウンボタンを使う方法を紹介します。

方法

AlertDialogでドロップダウンボタンを使うには、まずStatefulWidgetで変数を用意します。

var _value = 'Hello';

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

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

次に、ドロップダウンボタンを実装します。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      content: StatefulBuilder(
        builder: (BuildContext context, StateSetter setState) =>
            DropdownButton(
          value: _value,
          onChanged: (String? value) {
            setState(() {
              _value = value!;
            });
          },
          items: [
            DropdownMenuItem(
              child: Text('Hello'),
              value: 'Hello',
            ),
            DropdownMenuItem(
              child: Text('Hola'),
              value: 'Hola',
            ),
            DropdownMenuItem(
              child: Text('Halo'),
              value: 'Halo',
            ),
            DropdownMenuItem(
              child: Text('こんにちは'),
              value: 'こんにちは',
            ),
          ],
        ),
      ),
    );
  },
)

ドロップダウンの実装は、基本的に何も変わりません。

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

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      content: StatefulBuilder(
        builder: (BuildContext context, StateSetter setState) =>
            DropdownButton(
          value: _value,
          onChanged: (String? value) {
            setState(() {
              _value = value!;
            });
          },
          items: [
            DropdownMenuItem(
              child: Text('Hello'),
              value: 'Hello',
            ),
            DropdownMenuItem(
              child: Text('Hola'),
              value: 'Hola',
            ),
            DropdownMenuItem(
              child: Text('Halo'),
              value: 'Halo',
            ),
            DropdownMenuItem(
              child: Text('こんにちは'),
              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 _value = 'Hello';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '$_value',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 40,
            ),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      content: StatefulBuilder(
                        builder: (BuildContext context, StateSetter setState) =>
                            DropdownButton(
                          value: _value,
                          onChanged: (String? value) {
                            setState(() {
                              _value = value!;
                            });
                          },
                          items: [
                            DropdownMenuItem(
                              child: Text('Hello'),
                              value: 'Hello',
                            ),
                            DropdownMenuItem(
                              child: Text('Hola'),
                              value: 'Hola',
                            ),
                            DropdownMenuItem(
                              child: Text('Halo'),
                              value: 'Halo',
                            ),
                            DropdownMenuItem(
                              child: Text('こんにちは'),
                              value: 'こんにちは',
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ).then((value) => setState(() {}));
              },
              child: Text('Button'),
            )
          ],
        ),
      ),
    );
  }
}

補足

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

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

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

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

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

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

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

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

では、サラダバー！