flutter开发实战-生日等日期选择器DatePicker

flutter开发实战-生日等日期选择器DatePicker

在开发遇到设置生日等信息需要选择日期，这里用到的是CupertinoDatePicker

iOS效果的日期、时间选择器

一、效果图

运行后效果图如下

二、代码实现

我们需要调用底部弹窗显示

//显示底部弹窗  static void bottomSheetDialog(    BuildContext context,    Widget widget, {    bool? isScrollControlled,    bool? enableDrag,    Color? backgroundColor,  }) {    showModalBottomSheet(      context: context,      isScrollControlled: isScrollControlled ?? true,      enableDrag: enableDrag ?? true,      backgroundColor: backgroundColor ?? Colors.white,      builder: (ctx) {        return widget;      },    );  }

生日日期选择
ProfileBirthdayPicker

class ProfileBirthdayPicker extends StatefulWidget {  const ProfileBirthdayPicker({    Key? key,    required this.confirmPressed,  }) : super(key: key);  final Function(String date) confirmPressed;  @override  State<ProfileBirthdayPicker> createState() => _ProfileBirthdayPickerState();}class _ProfileBirthdayPickerState extends State<ProfileBirthdayPicker> {  String _datePickerDate = "";  @override  Widget build(BuildContext context) {    return Container(      height: 256.0,      color: Colors.white,      child: Column(        mainAxisAlignment: MainAxisAlignment.start,        crossAxisAlignment: CrossAxisAlignment.center,        children: [          _buildButtonRow(context),          Expanded(            child: CupertinoDatePicker(              dateOrder: DatePickerDateOrder.ymd,              mode: CupertinoDatePickerMode.date,              initialDateTime: DateTime.now(),              onDateTimeChanged: (date) {                print('onDateTimeChanged - $date');                String dateString =                    DateUtil.formatDate(date, format: "yyyy-MM-dd");                _datePickerDate = dateString;              },            ),          ),        ],      ),    );  }  Widget _buildButtonRow(BuildContext context) {    return Row(      mainAxisAlignment: MainAxisAlignment.spaceBetween,      crossAxisAlignment: CrossAxisAlignment.center,      children: [        ButtonWidget(          width: 80,          height: 50,          onPressed: () {            DialogUtil.pop(context);          },          child: Text(            "取消",            textAlign: TextAlign.center,            softWrap: true,            style: TextStyle(              fontSize: 16,              fontWeight: FontWeight.w500,              fontStyle: FontStyle.normal,              color: ColorUtil.hexColor(0xA1A1A1),              decoration: TextDecoration.none,            ),          ),          highlightedColor: ColorUtil.hexColor(0xf7f7f7),          bgColor: ColorUtil.hexColor(0xffffff),          bgHighlightedColor: ColorUtil.hexColor(0xf7f7f7),          enabled: true,          bgDisableColor: Colors.grey,          borderRadius: 8.0,        ),        ButtonWidget(          width: 80,          height: 50,          onPressed: () {            widget.confirmPressed(_datePickerDate);            DialogUtil.pop(context);          },          child: Text(            "确定",            textAlign: TextAlign.center,            softWrap: true,            style: TextStyle(              fontSize: 16,              fontWeight: FontWeight.w400,              fontStyle: FontStyle.normal,              color: ColorUtil.hexColor(0x338FFF),              decoration: TextDecoration.none,            ),          ),          highlightedColor: ColorUtil.hexColor(0xf7f7f7),          bgColor: ColorUtil.hexColor(0xffffff),          bgHighlightedColor: ColorUtil.hexColor(0xf7f7f7),          enabled: true,          bgDisableColor: Colors.grey,          borderRadius: 8.0,        ),      ],    );  }}

三、小结

flutter开发实战-生日等日期选择器DatePicker。iOS效果风格的日期选择器：CupertinoDatePicker。

学习记录，每天不停进步。

来源地址：https://blog.csdn.net/gloryFlow/article/details/131731107