Flutter日期选择器Bug：无法直接选择当前日期的解决方案咨询

问题分析 #

现有实现存在三个核心问题：

• 生日字段默认显示"Birthday"而非当日日期
• 打开日期选择器后，用户无法直接选中当日（必须先切换其他日期再切回）
• 点击屏幕收起弹窗时，未选中当日的逻辑未处理

修复方案 #

通过以下三步修改，完全满足需求：

1. 初始化选中日期为当日

将selectedDate初始化为当前日期，确保UI加载时直接显示当日：

DateTime? selectedDate = DateTime.now();
DateTime now = DateTime.now();

2. 调整UI显示逻辑

因为selectedDate已初始化为当日，UI会直接渲染日期而非默认文本：

GestureDetector(
  onTap: () => showDatePicker(context),
  child: SizedBox(
    width: width * 0.9,
    height: height * 0.06,
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.black, width: 1.0),
        borderRadius: BorderRadius.circular(15),
      ),
      child: Padding(
        padding: EdgeInsets.only(left: width * 0.060, top: height * 0.018),
        child: Text(
          selectedDate == null
              ? 'Birthday'
              : '${selectedDate!.year}/${selectedDate!.month}/${selectedDate!.day}',
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
        ),
      ),
    ),
  ),
),

3. 修改日期选择器弹窗逻辑

添加确认/取消按钮，支持用户主动选中当日，同时处理弹窗关闭时的日期回退：

void showDatePicker(BuildContext context) {
  DateTime initialDate = selectedDate ?? DateTime.now();
  DateTime minDate = DateTime(initialDate.year - 50, initialDate.month, initialDate.day);
  // 临时保存打开弹窗前的选中日期，用于取消操作恢复
  DateTime? tempDate = selectedDate;

  showCupertinoModalPopup(
    context: context,
    builder: (BuildContext builder) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            height: MediaQuery.of(context).size.height * 0.25,
            color: Colors.white,
            child: CupertinoDatePicker(
              maximumYear: initialDate.year,
              minimumYear: initialDate.year - 50,
              mode: CupertinoDatePickerMode.date,
              initialDateTime: initialDate,
              onDateTimeChanged: (value) {
                setState(() {
                  selectedDate = value;
                  // calAge();
                });
              },
              maximumDate: initialDate,
              minimumDate: minDate,
            ),
          ),
          // 操作按钮栏
          Container(
            color: Colors.white,
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  onPressed: () {
                    // 取消操作，恢复之前的日期
                    setState(() {
                      selectedDate = tempDate;
                    });
                    Navigator.pop(context);
                  },
                  child: const Text('取消', style: TextStyle(color: Colors.grey)),
                ),
                const SizedBox(width: 16),
                TextButton(
                  onPressed: () {
                    // 确认选中当前显示的日期
                    Navigator.pop(context);
                  },
                  child: const Text('确认', style: TextStyle(color: Colors.blue)),
                ),
              ],
            ),
          ),
        ],
      );
    },
  );
}

修复效果 #

• 初始加载时，生日字段直接显示当前日期
• 打开日期选择器后默认选中当日
• 用户无需切换其他日期，可直接点击"确认"选中当日；点击屏幕外部关闭弹窗时，若未修改日期则保持当日显示

内容的提问来源于stack exchange，提问作者Dasun Dola