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。

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