A Ethiopian Date & Time picker inspired by Material Design's DateTime picker, built on the ethiopian_datetime library. It offers full support for the Ethiopian calendar and is highly customizable, including compatibility with Material 3.
Additionally, it supports multiple languages, including Amharic,Oromiffa,Afsomali,tigrigna and custom locales, all while ensuring seamless integration with Flutter and maintaining Material Design standards.
- 🌟 Fully supports Ethiopian calendar
- 🛠 Highly customizable
- 💻 Supports Material 3
- 🌎 Multi-language support: Amharic,Oromiffa,Afsomai,Tigrigna and custom locales
- 📱 Compatible with Material Design standards
- Easy Documentation similar to Flutters Documentation
To use the Ethiopian DateTime Picker, add the package to your pubspec.yaml:
dependencies:
ethiopian_datetime_picker: <latest_version>Then, import it in your Dart code:
import 'package:ethiopian_datetime_picker/ethiopian_datetime_picker.dart';
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();for more on [ETDateTime] check ethiopian_datetime_picker package
var picked = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(ETDateTime.now()),
initialEntryMode: TimePickerEntryMode.input,
);
if (picked != null) String label = picked.toString();
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()}';
}
var picked = await showETDateRangePicker(
context: context,
initialDateRange: DateTimeRange(
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? ?? ""}";You can customize the styles of the DateETTimePicker and CupertinoETDatePicker using the DatePickerTheme within your app's ThemeData. Additionally, you can apply specific styles by wrapping the date picker with Theme in the builder.
Add the DatePickerTheme to your ThemeData:
return MaterialApp(
theme: ThemeData(
// Other theme properties...
datePickerTheme: DatePickerTheme(
backgroundColor: Colors.white, // Background color of the date picker
primaryColor: Colors.teal, // Primary color for the date picker
textColor: Colors.black, // Text color
// Customize more properties as needed
),
),
// ...
);You can also customize the Ethiopian date picker on a per-instance basis by wrapping it with a Theme in the builder:
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, // Override primary color
accentColor: Colors.amber, // Override accent color
// Add more customization here
),
child: child!,
);
},
);To customize the CupertinoETDatePicker, you can similarly apply a CupertinoTheme and you can add aditional locale:
showCupertinoModalPopup(
context: context,
builder: (context) {
return CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(color: Colors.white),
),
// Add more customization here
),
child: Container(
height: 300,
child: CupertinoETDatePicker(
locale: Locale('am')
mode: CupertinoETDatePickerMode.dateAndTime,
onDateTimeChanged: (ETdateTime dateTime) {
// Handle date change
},
),
),
);
},
);All customization options for the ETDateTimePicker and CupertinoETDatePicker are similar to those of the native Flutter date pickers. You can easily apply styles using ThemeData, DatePickerTheme, or by wrapping the pickers with Theme in the builder, just like you would with native Flutter widgets.
If you prefer to use Material 2 instead of Material 3 for your application, you can do so by setting the useMaterial3 parameter to false in the MaterialApp widget. This ensures that the application uses the Material 2 design principles.
Here’s how to set up your MaterialApp to use Material 2:
return MaterialApp(
title: 'Ethiopian DateTime Picker',
theme: ThemeData(
useMaterial3: false, // Set to false to use Material 2
datePickerTheme: DatePickerTheme(
backgroundColor: Colors.white,
primaryColor: Colors.teal,
textColor: Colors.black,
// Additional customizations
),
),
home: MyHomePage(),
);Feel free to check it out and give it a 
️ if you love it.
Follow me for more updates and projects!
Pull requests and feedback are always welcome!
Feel free to reach out at [email protected] or connect with me on LinkedIn.
Banner designed and whole package idea inspired by mohammad-amir-mohammadi
This project is licensed under the BSD 3-Clause License.