Flutter日期选择插件jhijri_picker的使用
Flutter日期选择插件 jhijri_picker
的使用
JHijri Picker Package
这是一个非常棒的希吉里日期选择器小部件,具有多种可自定义选项,易于使用、定制和实现。
Features 特性
- 希吉里日期选择器。
- 普通日期选择器。
- 易于使用、定制和实现。
Usage 使用方法
为了使用 JGlobalDatePicker
,您需要了解以下内容:
JDateModel 模型
这个模型可以是 JHijri
或者 DateTime
类型,但一次只能有一个值。
JDateModel dM = JDateModel(dateTime: DateTime.now());
// 或者
dM = JDateModel(jhijri: JHijri.now());
如果您想要在 JDateModel
中使用 JHijri
,则必须将 jhijri_converter
添加到您的 pubspec.yaml
文件中。
注意事项
如果使用了 onChange
方法,则不能同时使用 onOk
方法。
作为简单对话框使用
您可以这样打开一个简单的日期选择器对话框:
final val = openDialog(context);
Future<HijriDate?> openDialog(BuildContext context) async {
return await showGlobalDatePicker(context: context, pickerType: PickerType.JNormal);
}
作为完整对话框使用
下面是一个更复杂的例子,展示了如何以全屏对话框的形式展示日期选择器,并进行更多自定义设置:
final dialog = openDialog(context);
Future<HijriDate?> openDialog(BuildContext context) async {
return await showGlobalDatePicker(
context: context,
startDate: JDateModel(
jhijri: JHijri(
fYear: 1442,
fMonth: 12,
fDay: 10,
)),
selectedDate: JDateModel(jhijri: JHijri.now()),
endDate: JDateModel(
jhijri: JHijri(
fDay: 25,
fMonth: 1,
fYear: 1460,
)),
pickerMode: DatePickerMode.day,
pickerTheme: Theme.of(context),
textDirection: TextDirection.rtl,
okButtonText: "حفظ",
cancelButtonText: "عودة",
onOk: (value) {
debugPrint(value.toString());
Navigator.pop(context);
},
onCancel: () {
Navigator.pop(context);
},
primaryColor: Colors.blue,
calendarTextColor: Colors.white,
backgroundColor: Colors.black,
borderRadius: const Radius.circular(10),
buttonTextColor: Colors.white,
headerTitle: const Center(
child: Text("التقويم الهجري", style: TextStyle(color: Colors.white)),
),
);
}
作为Widget使用
您也可以直接将日期选择器作为一个Widget嵌入到您的应用中:
Widget _JHijriAsWidget() {
return JGlobalDatePicker(
widgetType: WidgetType.JContainer,
pickerType: PickerType.JHijri,
buttons: const SizedBox(),
primaryColor: Colors.blue,
calendarTextColor: Colors.white,
backgroundColor: Colors.black,
borderRadius: const Radius.circular(10),
headerTitle: const Center(
child: Text("التقويم الهجري"),
),
startDate: JDateModel(dateTime: DateTime.parse("1984-12-24")),
selectedDate: JDateModel(dateTime: DateTime.now()),
endDate: JDateModel(dateTime: DateTime.parse("2030-09-20")),
pickerMode: DatePickerMode.day,
pickerTheme: Theme.of(context),
textDirection: TextDirection.rtl,
onChange: (val) {
debugPrint(val.toString());
},
);
}
完整示例Demo
以下是完整的Flutter应用示例,展示了如何集成和使用 jhijri_picker
插件:
import 'package:flutter/material.dart';
import 'package:jhijri/jHijri.dart';
import 'package:jhijri_picker/jhijri_picker.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'JHijriPicker',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("JHijriDatePicker"),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: FloatingActionButton.extended(
heroTag: "4",
onPressed: () async {
final dateTime = await showGlobalDatePicker(
context: context, pickerType: PickerType.JNormal);
if (dateTime != null) {
debugPrint(dateTime.toString());
}
},
tooltip: 'Normal Date',
icon: const Icon(Icons.date_range_outlined),
label: Text("Normal"),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: FloatingActionButton.extended(
heroTag: "3",
onPressed: () async {
final dateTime = await showGlobalDatePicker(
context: context,
startDate: JDateModel(
jhijri: JHijri(
fYear: 1442,
fMonth: 12,
fDay: 10,
)),
selectedDate: JDateModel(jhijri: JHijri.now()),
endDate: JDateModel(
jhijri: JHijri(
fDay: 25,
fMonth: 1,
fYear: 1460,
)),
pickerMode: DatePickerMode.day,
pickerTheme: Theme.of(context),
textDirection: TextDirection.rtl,
okButtonText: "حفظ",
cancelButtonText: "عودة",
onOk: (value) {
debugPrint(value.toString());
Navigator.pop(context);
},
onCancel: () {
Navigator.pop(context);
},
primaryColor: Colors.blue,
calendarTextColor: Colors.white,
backgroundColor: Colors.black,
borderRadius: const Radius.circular(10),
buttonTextColor: Colors.white,
headerTitle: const Center(
child: Text(
"التقويم الهجري",
style: TextStyle(color: Colors.white),
),
),
);
if (dateTime != null) {
debugPrint(dateTime.toString());
}
},
tooltip: 'Hijri Date',
icon: const Icon(Icons.date_range_outlined),
label: Text("Hijri"),
),
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: ListView(
children: [
JGlobalDatePicker(
widgetType: WidgetType.JContainer,
pickerType: PickerType.JHijri,
buttons: const SizedBox(),
primaryColor: Colors.blue,
calendarTextColor: Colors.white,
backgroundColor: Colors.black,
borderRadius: const Radius.circular(10),
headerTitle: const Center(
child: Text("التقويم الهجري"),
),
startDate: JDateModel(dateTime: DateTime.parse("1984-12-24")),
selectedDate: JDateModel(dateTime: DateTime.now()),
endDate: JDateModel(dateTime: DateTime.parse("2030-09-20")),
pickerMode: DatePickerMode.day,
pickerTheme: Theme.of(context),
textDirection: TextDirection.rtl,
onChange: (val) {
debugPrint(val.toString());
},
),
const Divider(
color: Colors.blue,
),
JGlobalDatePicker(
widgetType: WidgetType.JContainer,
pickerType: PickerType.JNormal,
buttons: const SizedBox(),
primaryColor: Colors.blue,
calendarTextColor: Colors.white,
backgroundColor: Colors.black,
borderRadius: const Radius.circular(10),
headerTitle: const Center(
child: Text("التقويم الميلادي"),
),
startDate: JDateModel(dateTime: DateTime.parse("1984-12-24")),
selectedDate: JDateModel(dateTime: DateTime.now()),
endDate: JDateModel(dateTime: DateTime.parse("2030-09-20")),
pickerMode: DatePickerMode.day,
pickerTheme: Theme.of(context),
textDirection: TextDirection.rtl,
onChange: (val) {
debugPrint(val.toString());
},
),
],
))
],
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
以上就是关于 jhijri_picker
插件的基本介绍和使用方法。希望对您有所帮助!
更多关于Flutter日期选择插件jhijri_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter日期选择插件jhijri_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用jhijri_picker
日期选择插件的示例代码。jhijri_picker
是一个用于选择伊斯兰(Hijri)日期的Flutter插件。下面是一个完整的示例,展示如何集成和使用这个插件。
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加jhijri_picker
依赖:
dependencies:
flutter:
sdk: flutter
jhijri_picker: ^最新版本号 # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
2. 导入插件
在你的Dart文件中导入jhijri_picker
:
import 'package:flutter/material.dart';
import 'package:jhijri_picker/jhijri_picker.dart';
3. 使用插件
下面是一个简单的示例,展示如何在Flutter应用中使用jhijri_picker
来选择Hijri日期:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Hijri Date Picker Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
HijriDateTime? selectedDate;
void _selectDate(BuildContext context) async {
final HijriDateTime? pickedDate = await showHijriDatePicker(
context: context,
initialDate: selectedDate ?? HijriDateTime.now(),
firstDate: HijriDateTime(1400),
lastDate: HijriDateTime(1500),
);
if (pickedDate != null && pickedDate != selectedDate) {
setState(() {
selectedDate = pickedDate;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Hijri Date Picker Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
selectedDate == null
? 'No date selected'
: 'Selected date: ${selectedDate!.year}-${selectedDate!.month}-${selectedDate!.day}',
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _selectDate(context),
child: Text('Select Date'),
),
],
),
),
);
}
}
解释
- 依赖添加:在
pubspec.yaml
中添加jhijri_picker
依赖。 - 导入插件:在需要使用日期选择器的Dart文件中导入
jhijri_picker
。 - 创建UI:
- 使用
Scaffold
创建一个简单的页面布局。 - 使用
Text
显示当前选中的日期(如果有的话)。 - 使用
ElevatedButton
创建一个按钮,点击时调用_selectDate
方法来显示日期选择器。
- 使用
- 选择日期:
showHijriDatePicker
函数用于显示日期选择器对话框。initialDate
设置为当前选中的日期(如果为空则使用当前日期)。firstDate
和lastDate
设置可选日期的范围。- 选择日期后,更新UI以显示选中的日期。
这样,你就可以在Flutter应用中使用jhijri_picker
来选择Hijri日期了。记得根据实际需求调整代码中的参数和UI布局。