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;@overrideState<ProfileBirthdayPicker> createState() => _ProfileBirthdayPickerState();
}class _ProfileBirthdayPickerState extends State<ProfileBirthdayPicker> {String _datePickerDate = "";@overrideWidget 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,),],);}
}