Flutter中如何实现按年→月→日顺序的分步日期选择？

原生的showDatePicker默认直接展示完整日历，没法直接实现「先选年、再选月、最后选日」的分步逻辑，你需要拆分三步来实现，以下是纯原生的具体方案：

1. 分步逻辑拆解 #

• 第一步：弹出年份选择弹窗，仅允许用户选择年份
• 第二步：基于选中的年份，弹出月份选择弹窗
• 第三步：基于选中的年、月，弹出日期选择器并限制可选范围为该月的所有日期

2. 完整代码实现 #

年份选择器 #

Future<int?> pickYear(BuildContext context) async {
  return await showDialog<int>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('选择年份'),
        content: SizedBox(
          height: 200,
          child: ListView.builder(
            itemCount: 101, // 覆盖2000-2100年
            itemBuilder: (context, index) {
              final year = 2000 + index;
              return ListTile(
                title: Text(year.toString()),
                onTap: () => Navigator.pop(context, year),
              );
            },
          ),
        ),
      );
    },
  );
}

月份选择器 #

Future<int?> pickMonth(BuildContext context) async {
  final monthNames = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
  return await showDialog<int>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('选择月份'),
        content: SizedBox(
          height: 200,
          child: ListView.builder(
            itemCount: 12,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(monthNames[index]),
                onTap: () => Navigator.pop(context, index + 1), // 返回1-12的月份值
              );
            },
          ),
        ),
      );
    },
  );
}

整合分步选择流程 #

Future<void> pickDateStepByStep(BuildContext context) async {
  // 第一步：选年份
  final selectedYear = await pickYear(context);
  if (selectedYear == null) return;

  // 第二步：选月份
  final selectedMonth = await pickMonth(context);
  if (selectedMonth == null) return;

  // 计算选中年月的首尾日期，限制日期选择范围
  final firstDay = DateTime(selectedYear, selectedMonth, 1);
  final lastDay = DateTime(selectedYear, selectedMonth + 1, 0);

  // 第三步：选日期
  final finalDate = await showDatePicker(
    context: context,
    initialDate: firstDay,
    firstDate: firstDay,
    lastDate: lastDay,
    initialEntryMode: DatePickerEntryMode.calendarOnly,
  );

  if (finalDate != null) {
    // 这里处理最终选中的日期，比如赋值给变量或展示
    print('最终选中日期：${finalDate.year}-${finalDate.month}-${finalDate.day}');
  }
}

3. 调用方式 #

在按钮点击事件中触发分步选择：

ElevatedButton(
  onPressed: () => pickDateStepByStep(context),
  child: const Text('分步选择日期'),
)

如果不想自定义弹窗，也可以使用第三方库简化开发，但原生实现更轻量且无需额外依赖。

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