【flutter】アラートダイアログ上のドロップダウンメニューを選択した後、内容がドロップダウンメニューに即時反映されない

Question

前提

実現したいこと

アラートダイアログでドロップダウンリストを使用して
状態を即反映させる

発生している問題・エラーメッセージ

通常画面とアラートダイアログで別々のメニューを表示させたい
通常画面ではsetStateで即時反映されているようですが
アラートダイアログ画面では即時反映されず
1回アラートダイアログを消して再表示すると表示される

該当のソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);


  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  String? stockcompany;

  Widget DropMenuStock() {
    return DropdownButton(
      items: [
        DropdownMenuItem(child: Text(''),value: '-',),
        DropdownMenuItem(child: Text('A'),value: 'A',),
        DropdownMenuItem(child: Text('B'),value: 'B',),
        DropdownMenuItem(child: Text('C'),value: 'C',),
      ],
      onChanged: (String? value){
        setState((){
          stockcompany = value;
        });
      },
      value: stockcompany,
    );
  }

  String? stockcompanypop;

  Widget DropMenuPopStock() {
    return DropdownButton(
      items: [
        DropdownMenuItem(child: Text(''),value: '-',),
        DropdownMenuItem(child: Text('D'),value: 'D',),
        DropdownMenuItem(child: Text('E'),value: 'E',),
        DropdownMenuItem(child: Text('F'),value: 'F',),
      ],
      onChanged: (String? value){
        stockcompanypop = value;
        print('//////////${value}');
        setState((){
        });
      },
      value: stockcompanypop,
    );
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Column(
        children: [
          DropMenuStock(),
          IconButton(
              onPressed: (){
                showDialog(
                    context: context,
                    builder:(BuildContext context)=>
                        AlertDialog(
                          actions: [
                            DropMenuPopStock(),
                          ],
                        ),
                );
              },
              icon: Icon(Icons.add),
          ),
        ],
      )
    );
  }
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

setStateは更新(本当は再構築)する対象を意識して使う必要があります。

提示されたコードでは、更新対象は_MyHomePageStateであり、AlertDialogではありません。
そのためいくらsetStateしてもダイアログ内の表示の更新はされません。

AlertDialogを更新対象とするには、これをStatefulWidgetでラッピングしラッピングされたStatefulWidgetのsetStateを呼び出す必要があります。

以下、動くであろうshowDialogの実装です。
AlertDialogをStatefulBuilderでラッピングしてStatefulBuilderのsetState相当を呼び出しStatefulBuilder以下のウィジェットの再構築をするよう促しています。

ヘルプではsetStateをそのまま使っており、分かりづらそうなので以下ではsetState相当に関しては呼び出すものを明確にするため、あえてhogeという名称にしています。

                showDialog(
                  context: context,
                  builder: (BuildContext context) =>
                     // StatefulBuilderを更新するための物をhogeとしている
                      StatefulBuilder(builder: (context, StateSetter hoge) {
                    return AlertDialog(
                      actions: [
                        DropdownButton(
                          items: [
                            DropdownMenuItem(
                              child: Text(''),
                              value: '-',
                            ),
                            DropdownMenuItem(
                              child: Text('D'),
                              value: 'D',
                            ),
                            DropdownMenuItem(
                              child: Text('E'),
                              value: 'E',
                            ),
                            DropdownMenuItem(
                              child: Text('F'),
                              value: 'F',
                            ),
                          ],
                          onChanged: (String? value) {
                            stockcompanypop = value;
                            print('//////////${value}');
                            hoge(() {}); // 呼び出すものを明確にするためあえて名前を変えています。
                          },
                          value: stockcompanypop,
                        )
                      ],
                    );
                  }),
                );

Comments

[ouma]

いつも回答ありがとうございます
こういう方法があるんですね

ですが更新対象がどうなるのか全然わかってません…勉強します