Flutter datepicker包使用求助：日历不显示及日期范围选择器实现

问题分析 #

你当前的代码只是在onPressed中创建了SfDateRangePicker实例，但没有将这个Widget以弹窗/底部弹窗的方式添加到Widget树中，所以点击图标后日历不会显示。

解决步骤 #

1. 确认依赖配置 #

首先确保pubspec.yaml中已添加Syncfusion日期选择器依赖：

dependencies:
  syncfusion_flutter_datepicker: ^25.1.35 # 替换为最新版本

执行flutter pub get完成依赖安装。

2. 修改代码显示日历 #

将IconButton的点击逻辑修改为通过弹窗展示日期选择器：

child: IconButton(
  icon: const Icon(Icons.calendar_month),
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: SizedBox(
            width: double.maxFinite,
            height: 400,
            child: SfDateRangePicker(
              view: DateRangePickerView.year,
              selectionMode: DateRangePickerSelectionMode.range,
              // 监听日期范围选中变化
              onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
                if (args.value is PickerDateRange) {
                  final startDate = args.value.startDate;
                  final endDate = args.value.endDate;
                  // 这里处理选中的日期范围，比如打印或存储
                  print('开始日期: $startDate，结束日期: $endDate');
                }
              },
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('取消'),
            ),
            TextButton(
              onPressed: () {
                // 确认选择后的逻辑，比如关闭弹窗并保存选中值
                Navigator.pop(context);
              },
              child: const Text('确认'),
            ),
          ],
        );
      },
    );
  },
),

3. 可选：底部弹窗样式展示 #

如果偏好底部弹出的日历样式，可替换为showModalBottomSheet实现：

onPressed: () {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return SizedBox(
        height: 400,
        child: SfDateRangePicker(
          view: DateRangePickerView.year,
          selectionMode: DateRangePickerSelectionMode.range,
          showActionButtons: true,
          onCancel: () => Navigator.pop(context),
          onSubmit: (Object? value) {
            if (value is PickerDateRange) {
              print('选中范围: ${value.startDate} 至 ${value.endDate}');
            }
            Navigator.pop(context);
          },
        ),
      );
    },
  );
},

关键说明 #

• 必须通过showDialog/showModalBottomSheet等方法将SfDateRangePicker加入Widget树，才能正常显示。
• selectionMode: DateRangePickerSelectionMode.range已经开启范围选择功能，配合onSelectionChanged或onSubmit回调可获取选中的日期区间。
• 你当前代码中的localizationsDelegates配置是正确的，无需额外修改。

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