当前位置: 首页 > article >正文

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;

  
  State<ProfileBirthdayPicker> createState() => _ProfileBirthdayPickerState();
}

class _ProfileBirthdayPickerState extends State<ProfileBirthdayPicker> {
  String _datePickerDate = "";

  
  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。

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


http://www.kler.cn/a/37663.html

相关文章:

  • (33)接收信号强度指示(RSSI)
  • review回文子串
  • Android 使用webView打开网页可以实现自动播放音频
  • 计算机体系结构基础知识介绍之线程级并行性及其利用
  • 前端部署项目,经常会出现下载完 node 或者 npm 运行时候发现,提示找不到
  • 智能机器人嵌入ChatGPT会给社会带来哪些进步
  • 【前端知识】React 基础巩固(二十六)——Portals 的使用
  • MySQL-Redis数据类型操作和MongoDB基本操作
  • kafka第一课-Kafka快速实战以及基本原理详解
  • 使用Gataway设置全局过滤器
  • USB接口种类知多少?一起来温故一下吧!
  • 使用Dreambooth LoRA微调SDXL 0.9
  • LabVIEW-实现波形发生器
  • scss 预处理器自定义ui框架(bem架构)
  • 奇奇怪怪的知识点-EXCEL(1)
  • 如何给合宙ESP32-C3刷写arduino固件,arduinoIDE的配置,测试代码
  • Netty 编解码技术
  • mysql查询优化
  • ipv6 问题排查
  • 【项目部署】原生部署SpringBoot项目