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

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

埃塞俄比亚语（阿姆哈拉语、索马里语、奥罗莫语、提格雷尼亚语）日期与时间选择器插件

概述

该插件是一款基于Material Design设计的埃塞俄比亚日期与时间选择器。它建立在 ethiopian_datetime 库之上，提供了对埃塞俄比亚日历的全面支持，并且高度可定制，包括对Material 3的支持。

此外，该插件还支持多种语言，如阿姆哈拉语、索马里语、奥罗莫语和提格雷尼亚语，并确保与Flutter无缝集成，同时保持Material Design标准。

特性

• 🌟 全面支持埃塞俄比亚日历
• 🛠 高度可定制
• 💻 支持Material 3
• 🌎 多语言支持：阿姆哈拉语、索马里语、奥罗莫语、提格雷尼亚语和自定义地区
• 📱 符合Material Design标准
• 文档易于理解，类似于Flutter文档

开始使用

要使用埃塞俄比亚日期时间选择器插件，首先需要将其添加到你的 pubspec.yaml 文件中：

dependencies:
  ethiopian_datetime_picker: <latest_version>

然后，在你的Dart代码中导入该包：

import 'package:ethiopian_datetime_picker/ethiopian_datetime_picker.dart';

使用示例

1. 埃塞俄比亚日期选择器

ETDateTime? picked = await showETDatePicker(
  context: context,
  initialDate: ETDateTime.now(),
  firstDate: ETDateTime(2010),
  lastDate: ETDateTime(2030),
  initialEntryMode: DatePickerEntryMode.calendarOnly,
  initialDatePickerMode: DatePickerMode.year,
);

var label = picked?.formatFullDate(); // 格式化日期

2. 埃塞俄比亚时间选择器

var picked = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.fromDateTime(ETDateTime.now()),
  initialEntryMode: TimePickerEntryMode.input,
);

if (picked != null) {
  String label = picked.toString(); // 格式化时间
}

3. 弹出底部对话框中的埃塞俄比亚Cupertino日期选择器

ETdateTime? pickedDate = await showModalBottomSheet<ETdateTime>(
  context: context,
  builder: (context) {
    ETdateTime? tempPickedDate;
    return Container(
      height: 250,
      child: Column(
        children: <Widget>[
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                CupertinoButton(
                  child: Text('取消'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
                CupertinoButton(
                  child: Text('确定'),
                  onPressed: () {
                    print(tempPickedDate);
                    Navigator.of(context).pop(tempPickedDate ?? ETdateTime.now());
                  },
                ),
              ],
            ),
          ),
          Divider(
            height: 0,
            thickness: 1,
          ),
          Expanded(
            child: Container(
              child: CupertinoETDatePicker(
                initialDateTime: ETdateTime.now(),
                mode: CupertinoDatePickerMode.time,
                onDateTimeChanged: (ETdateTime dateTime) {
                  tempPickedDate = dateTime;
                },
              ),
            ),
          ),
        ],
      ),
    );
  },
);

if (pickedDate != null) {
  String label = '${pickedDate.toJalaliDateTime()}'; // 格式化日期时间
}

4. 埃塞俄比亚日期范围选择器

var picked = await showETDateRangePicker(
  context: context,
  initialDateRange: ETDateTimeRange(
    start: ETDateTime(2018, 1, 2),
    end: ETDateTime(2018, 1, 10),
  ),
  firstDate: ETDateTime(2000, 8),
  lastDate: ETDateTime(2040, 9),
  initialDate: ETDateTime.now(),
);

String label = "${picked?.start ?? ""} ${picked?.end ?? ""}"; // 格式化日期范围

5. 自定义日期选择器样式

你可以通过在应用的 ThemeData 中添加 DatePickerTheme 来自定义 DateETTimePicker 和 CupertinoETDatePicker 的样式。你还可以通过在构建器中包装 Theme 来实现特定样式的定制。

示例：自定义埃塞俄比亚日期选择器

在 ThemeData 中添加 DatePickerTheme：

return MaterialApp(
  theme: ThemeData(
    // 其他主题属性...
    datePickerTheme: DatePickerTheme(
      backgroundColor: Colors.white, // 日期选择器背景色
      primaryColor: Colors.teal, // 主颜色
      textColor: Colors.black, // 文本颜色
      // 更多自定义属性
    ),
  ),
  // ...
);

在构建器中自定义埃塞俄比亚日期选择器

你也可以通过在构建器中包装 Theme 来实现日期选择器的特定实例定制：

ETdateTime? picked = await showETDatePicker(
  context: context,
  initialDate: ETdateTime.now(),
  firstDate: ETdateTime(2000, 8),
  lastDate: ETdateTime(2030, 9),
  builder: (context, child) {
    return Theme(
      data: Theme.of(context).copyWith(
        primaryColor: Colors.teal, // 覆盖主颜色
        accentColor: Colors.amber, // 覆盖强调色
        // 添加更多定制
      ),
      child: child!,
    );
  },
);

示例：自定义埃塞俄比亚Cupertino日期选择器

同样，你可以通过应用 CupertinoTheme 来定制 CupertinoETDatePicker，并可以添加其他区域设置：

showCupertinoModalPopup(
  context: context,
  builder: (context) {
    return CupertinoTheme(
      data: CupertinoThemeData(
        textTheme: CupertinoTextThemeData(
          dateTimePickerTextStyle: TextStyle(color: Colors.white),
        ),
        // 添加更多定制
      ),
      child: Container(
        height: 300,
        child: CupertinoETDatePicker(
          locale: Locale('am'),
          mode: CupertinoETDatePickerMode.dateAndTime,
          onDateTimeChanged: (ETdateTime dateTime) {
            // 处理日期变化
          },
        ),
      ),
    );
  },
);

定制说明

ETDateTimePicker 和 CupertinoETDatePicker 的所有定制选项都类似于原生Flutter日期选择器。你可以通过 ThemeData、DatePickerTheme 或在构建器中包裹 Theme 来轻松应用样式，就像处理原生Flutter小部件一样。

6. 使用Material 2而不是Material 3

如果你更喜欢使用Material 2而不是Material 3来构建你的应用程序，可以在 MaterialApp 小部件中将 useMaterial3 参数设置为 false。这将确保应用程序使用Material 2的设计原则。

示例

如何设置 MaterialApp 以使用Material 2：

return MaterialApp(
  title: 'Ethiopian DateTime Picker',
  theme: ThemeData(
    useMaterial3: false, // 设置为 `false` 以使用Material 2
    datePickerTheme: DatePickerTheme(
      backgroundColor: Colors.white,
      primaryColor: Colors.teal,
      textColor: Colors.black,
      // 其他定制
    ),
  ),
  home: MyHomePage(),
);