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

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

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

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

一、效果图

运行后效果图如下

二、代码实现

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

dart 复制代码
//显示底部弹窗
  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

dart 复制代码
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。

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

相关推荐
bst@微胖子14 小时前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
小墙程序员15 小时前
Flutter 教程(十一)多语言支持
flutter
无知的前端17 小时前
Flutter 一文精通Isolate,使用场景以及示例
android·flutter·性能优化
yidahis17 小时前
Flutter 运行新建项目也报错?
flutter·trae
木马不在转18 小时前
Flutter-权限permission_handler插件配置
flutter
江上清风山间明月21 小时前
一周掌握Flutter开发--9. 与原生交互(下)
flutter·交互·原生·methodchannel
GeniuswongAir21 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
sayen21 小时前
记录 flutter 文本内容展示过长优化
前端·flutter
勤劳打代码21 小时前
剑拔弩张——焦点竞争引的发输入失效
flutter·客户端·设计
张风捷特烈1 天前
Flutter 伪 3D 绘制#02 | 地平面与透视
android·flutter