Flutter:どうしたらDialog内のDropdownMenuItemで選択した項目を表示することができますか？

Question

以下が私のコードです。項目を選択しても反映されません。解決方法を教えていただけると有難いです。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final items = ['Japanese', 'English'];
  String? isSelectedItem = 'Japanese';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text('Button'),
          onPressed: () {
            openDialog();
          },
        ),
      ),
    );
  }

  Future openDialog() => showDialog(
      context: context,
      builder: (context) => AlertDialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(0))),
            titlePadding: EdgeInsets.all(0.0),
            title: Container(
              padding: EdgeInsets.all(8.0),
              color: Colors.blue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Title', style: TextStyle(color: Colors.white))
                ],
              ),
            ),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [

                Text('Laungage'),
                Container(
                  child: DropdownButton<String>(
                      underline: Container(
                        height: 0,
                        color: Colors.grey,
                      ),
                      value: isSelectedItem,
                      icon: Icon(Icons.arrow_drop_down, color: Colors.grey),
                      isExpanded: true,
                      items: <String>[
                        'Japanese',
                        'English',
                      ].map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem(
                            value: value, child: Text(value));
                      }).toList(),
                      // items: items.map(buildMenuItem).toList(),
                      onChanged: (String? value) {
                        setState(() {
                          isSelectedItem = value;
                        });
                      }),
                ),
                Divider(
                  height: 1,
                  color: Colors.grey[500],
                  indent: 0,
                  endIndent: 0,
                  thickness: 1,
                )
              ],
            ),
            actions: [
              TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text('CLOSE')),
              ElevatedButton(
                  onPressed: () => Navigator.pop(context), child: Text('SEND')),
            ],
          ));

  DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
        value: item,
        child: Text(item,
            style: TextStyle(fontWeight: FontWeight.normal, fontSize: 16)),
      );
}

以下が期待される結果の画像です。

Answer 1

現在のだと、_MyStatefulWidgetStateを更新するという動作になってしまう。
なので、AlertDialogをStatefulBuilderでラッピングしてStatefulBuilder以下をsetStateの更新対象にする。
主な変更箇所だけ書くとこんな感じ。

  Future openDialog() => showDialog(
      context: context,
      builder: (context) =>
          StatefulBuilder(builder: (context, StateSetter setState) {
            return AlertDialog(

Comments

[junad]

返事が遅れて申し訳ございません。無事解決することができました。回答していただきありがとうございます！