Flutter日期时间选择器插件bmb_datetime_picker的使用

BMB Datetime Picker

[Pub] bmb_datetime_picker

一个受 flutter-cupertino-date-picker 启发的 Flutter 日期时间选择器。

你可以选择日期、时间或日期与时间，并支持多种语言：

• 阿尔巴尼亚语(sq)
• 阿拉伯语(ar)
• 亚美尼亚语(hy)
• 阿塞拜疆语(az)
• 巴斯克语(eu)
• 孟加拉语(bn)
• 保加利亚语(bg)
• 加泰罗尼亚语(cat)
• 中文(zh)
• 丹麦语(da)
• 荷兰语(nl)
• 英语(en)
• 法语(fr)
• 德语(de)
• 希伯来语(he)
• 印度尼西亚语(id)
• 意大利语(it)
• 日语(jp)
• 哈萨克语(kk)
• 韩语(ko)
• 波斯语(fa)
• 波兰语(pl)
• 葡萄牙语(pt)
• 俄语(ru)
• 西班牙语(es)
• 瑞典语(sv)
• 泰语(th)
• 土耳其语(tr)
• 越南语(vi)
• 高棉语(kh)

你还可以自定义你的选择器内容。

国际化示例：

Demo App

使用方法

以下是一个简单的示例，展示如何使用 bmb_datetime_picker 插件显示日期选择器：

TextButton(
    onPressed: () {
        // 显示日期选择器
        DatePicker.showDatePicker(context,
            showTitleActions: true, // 是否显示标题和确认按钮
            minTime: DateTime(2018, 3, 5), // 最小可选日期
            maxTime: DateTime(2019, 6, 7), // 最大可选日期
            onChanged: (date) { // 当选择变化时触发
                print('改变的日期: $date');
            },
            onConfirm: (date) { // 当用户确认选择时触发
                print('确认的日期: $date');
            },
            currentTime: DateTime.now(), // 默认显示当前日期
            locale: LocaleType.zh); // 设置语言为中文
    },
    child: Text(
        '显示日期选择器（中文）',
        style: TextStyle(color: Colors.blue),
    ),
);

运行效果：

• 点击按钮后会弹出日期选择器。
• 用户可以选择日期并点击确认按钮。
• 在控制台中打印所选日期。

自定义日期时间选择器

如果你想自定义日期时间选择器的样式，可以使用 CommonPickerModel 类。所有类型的日期时间选择器都继承自该类。你可以参考现有的模型（例如 DatePickerModel），然后编写自己的模型并传递给 showPicker 方法。

以下是一个自定义时间选择器的示例：

class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0"); // 补零操作
  }

  CustomPicker({DateTime currentTime, LocaleType locale})
      : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now(); // 默认时间为当前时间
    this.setLeftIndex(this.currentTime.hour); // 设置初始小时
    this.setMiddleIndex(this.currentTime.minute); // 设置初始分钟
    this.setRightIndex(this.currentTime.second); // 设置初始秒
  }

  @override
  String leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2); // 返回小时字符串
    } else {
      return null;
    }
  }

  @override
  String middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2); // 返回分钟字符串
    } else {
      return null;
    }
  }

  @override
  String rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2); // 返回秒字符串
    } else {
      return null;
    }
  }

  @override
  String leftDivider() {
    return "|"; // 左侧分隔符
  }

  @override
  String rightDivider() {
    return "|"; // 右侧分隔符
  }

  @override
  List<int> layoutProportions() {
    return [1, 2, 1]; // 设置三个选择器的比例
  }

  @override
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex())
        : DateTime(
            currentTime.year,
            currentTime.month,
            currentTime.day,
            this.currentLeftIndex(),
            this.currentMiddleIndex(),
            this.currentRightIndex()); // 返回最终选择的时间
  }
}

使用自定义选择器的示例代码：

TextButton(
    onPressed: () {
        showPicker(
            context: context,
            pickerModel: CustomPicker(locale: LocaleType.zh)); // 使用自定义模型
    },
    child: Text(
        '显示自定义时间选择器',
        style: TextStyle(color: Colors.blue),
    ),
);