使用setState后日期无法显示，formattedDate始终为空的问题

问题根源 #

• 你在setState的回调函数里定义的formattedDate是局部变量，仅在该回调的作用域内有效，build方法根本访问不到这个变量。所以Text(formattedDate ?? "EMPTY")里的formattedDate要么未定义、要么是类中未初始化的null变量，自然始终显示"EMPTY"。
• 另外，你在setState里只是定义了局部变量，没有给类的成员变量赋值，就算build能访问也拿不到选中的日期值。

修复步骤 #

1. 在你的State类中声明一个成员变量，用于存储格式化后的日期：

   String? formattedDate;
   

2. 在setState回调里，把格式化后的日期赋值给这个成员变量，而非重新定义局部变量：

   setState(() {
     final DateFormat formatter = DateFormat('yyyy-MM-dd');
     formattedDate = formatter.format(x); // 直接给成员变量赋值
     print(formattedDate);
     print(formattedDate.runtimeType);
   });
   

3. 确保Text组件使用的是这个类成员变量。

完整修复后的代码示例 #

class _YourWidgetState extends State<YourWidget> {
  String? formattedDate; // 声明类成员变量

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          onPressed: () async {
            DateTime? x = await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime.now(),
                lastDate: DateTime(2040));
            if (x == null) return;
            setState(() {
              final DateFormat formatter = DateFormat('yyyy-MM-dd');
              formattedDate = formatter.format(x);
              print(formattedDate);
              print(formattedDate.runtimeType);
            });
          },
          icon: const Icon(UniconsLine.clock)),
        Text(formattedDate ?? "EMPTY"),
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者Fatih Yılmaz