Flutter调用setState后showDatePicker选中日期未更新文本字段问题

和Text组件是否不可变无关，核心问题是setState生效的作用域错了：

• showDialog弹出的弹窗属于独立路由节点，和外层页面不在同一个构建上下文里
• 你之前调用的setState是外层_PickDateState的方法，只会触发外层Scaffold页面的重绘，根本不会重新执行弹窗的builder逻辑，所以哪怕变量值已经打印出更新结果，弹窗内的Text组件因为没有被重建，自然不会显示新值
• 你之前尝试的String变量存值、换TextEditingController的思路本身没有问题，只是没有触发弹窗所在上下文的UI重建。

两种实现方式都可以，优先选第一种更易维护：

• 方案1：把弹窗内容抽离为独立的StatefulWidget，在弹窗组件内部管理状态、调用自身setState刷新，避免跨路由状态混乱
• 方案2：在showDialog的builder中使用StatefulBuilder包裹弹窗内容，拿到弹窗专属的setState方法，选中日期后调用该方法触发弹窗内部重绘，不需要单独抽离组件

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

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

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

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Date Test',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: const PickDate(),
   );
 }
}

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

  @override
  State<PickDate> createState() => _PickDateState();
}

class _PickDateState extends State<PickDate> {
  DateTime selectedDate = DateTime.now();
  final DateFormat formatter = DateFormat('MM/dd/yy');
  final dateController = TextEditingController();

  @override
  void initState() {
    super.initState();
    dateController.text = formatter.format(selectedDate);
  }

  Future<void> _selectDate(BuildContext context, void Function(VoidCallback fn) dialogSetState) async {
    final DateTime? picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2022, 5),
        lastDate: DateTime(2023));
    if (picked != null && picked != selectedDate) {
      selectedDate = picked;
      dateController.text = formatter.format(selectedDate);
      print('Select Date: ${dateController.text}');
      // 调用弹窗自身的setState刷新弹窗内容
      dialogSetState(() {});
    }
  }

  Future<String?> displayDialog(BuildContext context, String title) async {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          // 通过StatefulBuilder拿到弹窗作用域的setState
          return StatefulBuilder(
            builder: (context, dialogSetState) {
              return Dialog(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                elevation: 6,
                backgroundColor: Colors.transparent,
                child: Container(
                  height: 300,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Text(dateController.text),
                          ElevatedButton.icon(
                              onPressed: () async {
                                await _selectDate(context, dialogSetState);
                              },
                              icon: const Icon(Icons.date_range_sharp),
                              label: const Text('Pick Date')),
                        ],
                      ),
                      const SizedBox(height: 40,),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          TextButton(
                            onPressed: () {
                              Navigator.of(context).pop('x');
                            },
                            child: const Text(
                              "Cancel",
                            ),
                          ),
                          ElevatedButton(
                            style: ButtonStyle(
                              backgroundColor:
                              MaterialStateProperty.all(Colors.lightBlue),
                            ),
                            child: Text(
                              "Save".toUpperCase(),
                            ),
                            onPressed: () {
                              // 点击保存时触发外层页面刷新，同步选中值到主界面
                              setState(() {});
                              Navigator.of(context).pop('');
                            },
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              );
            }
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('当前选中日期：${dateController.text}'),
            const SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                displayDialog(context, 'New Date');
              },
              child: const Text('New Date')),
          ],
        ),
      ),
    );
  }
}

• 原代码中Dialog设置了50的圆角，和内部Container的12圆角不匹配，会出现边角露白问题，修正代码中已经统一圆角参数
• TextEditingController仅对绑定的TextField生效，普通Text组件不会自动监听controller的内容变化，必须触发组件所在上下文的重建才会显示新值
• 如果弹窗逻辑复杂、交互多，建议直接把弹窗内容抽成独立StatefulWidget，比嵌套StatefulBuilder更易维护。

内容的提问来源于stack exchange，提问作者E Run