Flutter待办App：如何实现滚轮式美观日期选择器？

方案一：用Flutter自带CupertinoDatePicker（iOS风格滚轮） #

想要原生iOS风格的滚轮日期选择器，直接用CupertinoDatePicker配合底部弹窗就能实现，示例代码如下：

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          height: 250,
          child: CupertinoDatePicker(
            initialDateTime: DateTime(2022, 5, 5),
            minimumDate: DateTime(1922, 4, 4),
            maximumDate: DateTime(2122, 7, 7),
            mode: CupertinoDatePickerMode.date, // 可选date、time、dateAndTime三种模式
            onDateTimeChanged: (DateTime newDate) {
              // 处理选中的日期
              print(newDate);
            },
          ),
        );
      },
    );
  },
  child: Text('选择日期'),
)

这个组件默认就是滚轮样式，不仅适配iOS，在Android上也能正常显示滚轮效果，视觉风格统一。

方案二：第三方库实现高度自定义滚轮 #

如果需要调整滚轮颜色、文字大小等细节，可使用flutter_picker库（直接在pubspec.yaml添加依赖即可），示例代码：

先在pubspec.yaml中添加依赖：

dependencies:
  flutter_picker: ^2.1.0

然后实现选择器：

ElevatedButton(
  onPressed: () {
    Picker(
      adapter: DateTimePickerAdapter(
        type: PickerDateTimeType.kYMD,
        yearBegin: 1922,
        yearEnd: 2122,
        value: DateTime(2022, 5, 5),
      ),
      title: Text('选择日期'),
      onConfirm: (Picker picker, List<int> value) {
        DateTime selectedDate = (picker.adapter as DateTimePickerAdapter).value;
        print(selectedDate);
      },
    ).showDialog(context);
  },
  child: Text('选择日期'),
)

这个库支持自定义滚轮样式、分隔线、文字格式等，完全满足美观性需求。

方案三：修改默认DatePickerDialog为滚轮样式（Android适配） #

如果想保留Android平台风格，同时改成滚轮样式，可通过Theme组件修改默认样式：

ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) {
        return Theme(
          data: Theme.of(context).copyWith(
            datePickerTheme: DatePickerThemeData(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16),
              ),
              backgroundColor: Colors.white,
              // 可根据需求调整更多样式参数
            ),
          ),
          child: DatePickerDialog(
            initialDate: DateTime(2022, 5, 5),
            firstDate: DateTime(1922, 4, 4),
            lastDate: DateTime(2122, 7, 7),
          ),
        );
      },
    );
  },
  child: Text('选择日期'),
)

注：Android系统版本不同，默认DatePicker样式可能有差异，通过DatePickerThemeData可强制调整为滚轮模式。

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