Flutter对话框内Dropdown选择后State不重建问题求助

对话框内的Dropdown组件选择选项后，新值无法显示；对话框外使用setState能正常触发组件重建，但对话框内完全不生效。相关代码如下：

import 'package:flutter/material.dart';

import '../../../variables.dart';

class HomePageTeacher extends StatefulWidget {
  const HomePageTeacher({super.key});

  @override
  State<HomePageTeacher> createState() => _HomePageTeacherState();
}

class _HomePageTeacherState extends State<HomePageTeacher> {
  String name = "//name of user//"; // Replace with name of user
  String? selectedVal;
  static const menuItems = [
    "Info",
    "Urgent",
  ];
  final List<DropdownMenuItem<String>> _popUpItems = menuItems
      .map((String value) => DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          ))
      .toList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        tooltip: "Add Update",
        onPressed: () {
          showDialog(
            context: context,
            builder: (context){
              return AlertDialog(
                title: const Text('Input Text'),
                content: const TextField(
                  maxLength: 200,
                  maxLines: null,
                  decoration: InputDecoration(hintText: 'Enter text'),
                ),
                actions: [
                  TextButton(
                    child: const Text('Cancel'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                  DropdownButton(
                    value: selectedVal,
                    hint: const Text("Type of Message"),
                    items: _popUpItems,
                    onChanged: (newValue) {
                      if (newValue != null) {
                        setState(() {
                          selectedVal = newValue;
                          debugPrint(selectedVal);
                        });
                      }
                    },
                  )
                ],
              );
            },
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

问题原因 #

showDialog的builder是在点击FloatingActionButton时执行并创建对话框组件的，对话框属于独立于HomePageTeacher的子树。当调用HomePageTeacher的setState时，只会重建HomePageTeacher的组件树，不会重新执行对话框的builder方法，因此对话框内的Dropdown无法感知到外部状态的变化，也就不会更新显示。

解决方案 #

方案1：使用StatefulBuilder包裹对话框 #

StatefulBuilder可以让对话框内部拥有自己的状态更新能力，同时也能同步外部的状态变量：

onPressed: () {
  showDialog(
    context: context,
    builder: (context){
      return StatefulBuilder(
        builder: (dialogContext, setStateDialog) {
          return AlertDialog(
            title: const Text('Input Text'),
            content: const TextField(
              maxLength: 200,
              maxLines: null,
              decoration: InputDecoration(hintText: 'Enter text'),
            ),
            actions: [
              TextButton(
                child: const Text('Cancel'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              DropdownButton(
                value: selectedVal,
                hint: const Text("Type of Message"),
                items: _popUpItems,
                onChanged: (newValue) {
                  if (newValue != null) {
                    // 更新外部状态
                    setState(() {
                      selectedVal = newValue;
                    });
                    // 触发对话框内部重建
                    setStateDialog(() {});
                  }
                },
              )
            ],
          );
        },
      );
    },
  );
},

方案2：将对话框封装为独立的StatefulWidget #

把对话框抽成单独的有状态组件，让它自己管理内部状态，逻辑更清晰：

// 单独的对话框组件
class UpdateDialog extends StatefulWidget {
  final String? initialValue;
  final List<DropdownMenuItem<String>> items;
  final Function(String?) onValueChanged;

  const UpdateDialog({
    super.key,
    required this.initialValue,
    required this.items,
    required this.onValueChanged,
  });

  @override
  State<UpdateDialog> createState() => _UpdateDialogState();
}

class _UpdateDialogState extends State<UpdateDialog> {
  String? _selectedVal;

  @override
  void initState() {
    super.initState();
    _selectedVal = widget.initialValue;
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Input Text'),
      content: const TextField(
        maxLength: 200,
        maxLines: null,
        decoration: InputDecoration(hintText: 'Enter text'),
      ),
      actions: [
        TextButton(
          child: const Text('Cancel'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        DropdownButton(
          value: _selectedVal,
          hint: const Text("Type of Message"),
          items: widget.items,
          onChanged: (newValue) {
            setState(() {
              _selectedVal = newValue;
            });
            widget.onValueChanged(newValue);
          },
        )
      ],
    );
  }
}

// 在HomePageTeacher中调用
onPressed: () {
  showDialog(
    context: context,
    builder: (context){
      return UpdateDialog(
        initialValue: selectedVal,
        items: _popUpItems,
        onValueChanged: (newValue) {
          setState(() {
            selectedVal = newValue;
          });
        },
      );
    },
  );
},

内容的提问来源于stack exchange，提问作者Ja'afar Zakariya