Flutter如何将当日日期设为DropdownButton下拉框的默认值

核心调整分3部分，完全不破坏原有选择逻辑，同时解决初始值显示问题：

• 初始化阶段就生成格式化后的当日日期，作为下拉初始状态的展示值，同时页面加载时自动执行原有选「Today」时的日期存储、可预约时段查询逻辑
• 用selectedItemBuilder自定义下拉按钮选中态的展示内容，避免出现「DropdownButton的value不在items列表中」的报错
• 调整选项选中后的赋值逻辑，选「Today」时展示当日日期，选日历选项后展示用户选中的日期

具体代码修改 #

1. 调整状态变量与初始化逻辑 #

把原来写死的dropdownvalue = 'Today'替换为初始化时生成的当日格式化日期，在initState中完成初始化和首屏逻辑执行：

// 引入intl包（你原有代码已经使用DateFormat，这步可跳过）
import 'package:intl/intl.dart';

// 状态变量定义
late String formattedToday; // 存储格式化后的当日日期
late String dropdownvalue;
// 下拉选项保持原有定义不变
var items = [
  'Today',
  'Choose from calendar',
];
// 存储当前选中的日期，默认是当日
DateTime currentDateTime = DateTime.now();

@override
void initState() {
  super.initState();
  // 初始化当日日期，格式和原有逻辑保持一致
  formattedToday = DateFormat('dd-MM-yyyy').format(currentDateTime);
  // 下拉初始值先设为'Today'，保证和items列表值匹配不报错
  dropdownvalue = 'Today';

  // 首屏加载完成后执行原有Today选项的业务逻辑
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final storeProvider = Provider.of<StorageProvider>(context, listen: false);
    storeProvider.updateAppointmentDate(formattedToday);
    final slotBookingProvider = Provider.of<SlotBookingProvider>(context, listen: false);
    slotBookingProvider.checkAvailableSlot(date: formattedToday, context: context);
  });
}

2. 修改DropdownButton组件代码 #

新增selectedItemBuilder自定义选中态展示内容，调整onChanged逻辑适配日期展示：

DropdownButton(
  underline: Container(),
  isExpanded: true,
  value: dropdownvalue,
  icon: const Icon(
    Icons.keyboard_arrow_down,
    color: Color(0xffB50000),
  ),
  // 下拉选项保持原有逻辑不变
  items: items.map((String item) {
    return DropdownMenuItem(
      value: item,
      child: Text(
        item,
        style: TextStyle(
            color: Color(0xffB50000),
            fontWeight: FontWeight.w400),
      ),
    );
  }).toList(),
  // 自定义选中后在按钮上展示的内容，核心实现初始显示日期的需求
  selectedItemBuilder: (BuildContext context) {
    return items.map((String item) {
      // 默认展示当日日期
      String displayText = formattedToday;
      // 如果选了日历选项，展示日历选中的格式化日期
      if (dropdownvalue == 'Choose from calendar') {
        displayText = DateFormat('dd-MM-yyyy').format(currentDateTime);
      }
      return Text(
        displayText,
        style: TextStyle(
            color: Color(0xffB50000),
            fontWeight: FontWeight.w400),
      );
    }).toList();
  },
  onChanged: (String? newValue) {
    if (newValue == null) return;
    setState(() {
      dropdownvalue = newValue;
    });

    if(dropdownvalue =='Choose from calendar'){
      // 唤起日期选择器，等待用户选择结果
      _selectedDate(context).then((selectedDate) {
        if (selectedDate != null) {
          setState(() {
            currentDateTime = selectedDate;
          });
          String selectedFormatted = DateFormat('dd-MM-yyyy').format(selectedDate);
          final storeProvider = Provider.of<StorageProvider>(context, listen: false);
          storeProvider.updateAppointmentDate(selectedFormatted);
          final slotBookingProvider = Provider.of<SlotBookingProvider>(context, listen: false);
          slotBookingProvider.checkAvailableSlot(date: selectedFormatted, context: context);
        }
      });
    }
    if(dropdownvalue =='Today'){
      setState(() {
        currentDateTime = DateTime.now();
      });
      String today = DateFormat('dd-MM-yyyy').format(currentDateTime);
      final storeProvider = Provider.of<StorageProvider>(context, listen: false);
      storeProvider.updateAppointmentDate(today);
      final slotBookingProvider = Provider.of<SlotBookingProvider>(context, listen: false);
      slotBookingProvider.checkAvailableSlot(date: today, context: context);
    }
  },
)

3. 适配日期选择器方法 #

确保你的_selectedDate方法能返回选中的DateTime对象，如果原来没有返回值，参考如下调整：

Future<DateTime?> _selectedDate(BuildContext context) async {
  return await showDatePicker(
    context: context,
    initialDate: currentDateTime,
    firstDate: DateTime(2024),
    lastDate: DateTime(2030),
    // 其他日期选择器配置保持你原有设置即可
  );
}

改完后效果：页面首次加载时下拉按钮直接显示当日格式化日期，下拉展开的选项还是原来的「Today」「Choose from calendar」两个，选Today自动切回当日日期，选日历自动展示选中的日期，原有业务逻辑完全不受影响。

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