Flutter波斯时间选择器插件persian_time_selector的使用
Flutter波斯时间选择器插件persian_time_selector的使用
目录
使用
在你的 pubspec.yaml 文件中添加以下依赖：
dependencies:
persian_time_selector: version
在你的库文件中添加以下导入：
import 'package:persian_time_selector/persian_time_selector.dart';
示例代码
以下是多个使用该插件的例子：
/////////////////////////Example 1////////////////////////////
Jalali picked = await showPersianDatePicker(
context: context,
initialDate: Jalali.now(),
firstDate: Jalali(1385, 8),
lastDate: Jalali(1450, 9),
);
var label = picked.formatFullDate();
/////////////////////////Example 2////////////////////////////
var picked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
var label = picked.persianFormat(context);
/////////////////////////Example 3////////////////////////////
Jalali pickedDate = await showModalBottomSheet<Jalali>(
context: context,
builder: (context) {
Jalali tempPickedDate;
return Container(
height: 250,
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CupertinoButton(
child: Text(
'لغو',
style: TextStyle(
fontFamily: 'Dana',
),
),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoButton(
child: Text(
'تایید',
style: TextStyle(
fontFamily: 'Dana',
),
),
onPressed: () {
Navigator.of(context).pop(tempPickedDate ?? Jalali.now());
},
),
],
),
),
Divider(
height: 0,
thickness: 1,
),
Expanded(
child: Container(
child: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
dateTimePickerTextStyle: TextStyle(fontFamily: "Dana"),
),
),
child: PCupertinoDatePicker(
mode: PCupertinoDatePickerMode.dateAndTime,
onDateTimeChanged: (Jalali dateTime) {
tempPickedDate = dateTime;
},
),
),
),
),
],
),
);
},
);
/////////////////////////Example 4////////////////////////////
var picked = await showPersianDateRangePicker(
context: context,
initialEntryMode: PDatePickerEntryMode.input,
initialDateRange: JalaliRange(
start: Jalali(1400, 1, 2),
end: Jalali(1400, 1, 10),
),
firstDate: Jalali(1385, 8),
lastDate: Jalali(1450, 9),
);
完整示例代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:persian_time_selector/persian_time_selector.dart';
final ThemeData androidTheme = new ThemeData(
fontFamily: 'Dana',
);
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: androidTheme,
home: new MyHomePage(title: 'دیت تایم پیکر فارسی'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String label = '';
String selectedDate = Jalali.now().toJalaliDateTime();
[@override](/user/override)
void initState() {
super.initState();
label = 'انتخاب تاریخ زمان';
}
[@override](/user/override)
Widget build(BuildContext context) {
return new Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Text(
widget.title,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black),
),
centerTitle: true,
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [Colors.white, Color(0xffE4F5F9)],
),
),
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 10),
physics: BouncingScrollPhysics(),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
children: [
imageButton(
onTap: () async {
Jalali? picked = await showPersianDatePicker(
context: context,
initialDate: Jalali.now(),
firstDate: Jalali(1385, 8),
lastDate: Jalali(1450, 9),
initialEntryMode: PDatePickerEntryMode.calendarOnly,
initialDatePickerMode: PDatePickerMode.year,
builder: (context, child) {
return Theme(
data: ThemeData(
dialogTheme: const DialogTheme(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(0)),
),
),
),
child: child!,
);
});
if (picked != null && picked != selectedDate) {
setState(() {
label = picked.toJalaliDateTime();
});
}
},
image: '08',
),
imageButton(
onTap: () async {
Jalali? pickedDate = await showModalBottomSheet<Jalali>(
context: context,
builder: (context) {
Jalali? tempPickedDate;
return Container(
height: 250,
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CupertinoButton(
child: Text(
'لغو',
style: TextStyle(
fontFamily: 'Dana',
),
),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoButton(
child: Text(
'تایید',
style: TextStyle(
fontFamily: 'Dana',
),
),
onPressed: () {
Navigator.of(context).pop(tempPickedDate ?? Jalali.now());
},
),
],
),
),
Divider(
height: 0,
thickness: 1,
),
Expanded(
child: Container(
child: PCupertinoDatePicker(
mode: PCupertinoDatePickerMode.dateAndTime,
onDateTimeChanged: (Jalali dateTime) {
tempPickedDate = dateTime;
},
),
),
),
],
),
);
},
);
if (pickedDate != null) {
setState(() {
label = '${pickedDate.toDateTime()}';
});
}
},
image: '07',
),
imageButton(
onTap: () async {
var picked = await showPersianTimePicker(
context: context,
initialTime: TimeOfDay.now(),
initialEntryMode: PTimePickerEntryMode.input,
builder: (BuildContext context, Widget? child) {
return Directionality(
textDirection: TextDirection.rtl,
child: MediaQuery(
data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
child: child!,
),
);
},
);
setState(() {
if (picked != null)
label = picked.persianFormat(context);
});
},
image: '09',
),
imageButton(
onTap: () async {
Jalali? pickedDate = await showModalBottomSheet<Jalali>(
context: context,
builder: (context) {
Jalali? tempPickedDate;
return Container(
height: 250,
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CupertinoButton(
child: Text(
'لغو',
style: TextStyle(
fontFamily: 'Dana',
),
),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoButton(
child: Text(
'تایید',
style: TextStyle(
fontFamily: 'Dana',
),
),
onPressed: () {
print(tempPickedDate ?? Jalali.now());
Navigator.of(context).pop(tempPickedDate ?? Jalali.now());
},
),
],
),
),
Divider(
height: 0,
thickness: 1,
),
Expanded(
child: Container(
child: PCupertinoDatePicker(
mode: PCupertinoDatePickerMode.time,
onDateTimeChanged: (Jalali dateTime) {
tempPickedDate = dateTime;
},
),
),
),
],
),
);
},
);
if (pickedDate != null) {
setState(() {
label = '${pickedDate.toJalaliDateTime()}';
});
}
},
image: '05',
),
],
),
),
Expanded(
child: Column(
children: [
imageButton(
onTap: () async {
var picked = await showPersianDateRangePicker(
context: context,
initialDateRange: JalaliRange(
start: Jalali(1400, 1, 2),
end: Jalali(1400, 1, 10),
),
firstDate: Jalali(1385, 8),
lastDate: Jalali(1450, 9),
);
setState(() {
label = "${picked?.start?.toJalaliDateTime() ?? ""} ${picked?.end?.toJalaliDateTime() ?? ""}";
});
},
image: '03',
),
imageButton(
onTap: () async {
var picked = await showPersianTimePicker(
context: context,
initialTime: TimeOfDay.now(),
builder: (BuildContext context, Widget? child) {
return Directionality(
textDirection: TextDirection.rtl,
child: child!,
);
},
);
setState(() {
if (picked != null)
label = picked.persianFormat(context);
});
},
image: '04',
),
imageButton(
onTap: () async {
var picked = await showPersianDateRangePicker(
context: context,
initialEntryMode: PDatePickerEntryMode.input,
initialDateRange: JalaliRange(
start: Jalali(1400, 1, 2),
end: Jalali(1400, 1, 10),
),
firstDate: Jalali(1385, 8),
lastDate: Jalali(1450, 9),
);
setState(() {
label = "${picked?.start?.toJalaliDateTime() ?? ""} ${picked?.end?.toJalaliDateTime() ?? ""}";
});
},
image: '06',
),
],
),
),
],
),
),
),
bottomNavigationBar: Container(
height: 70,
width: double.infinity,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(boxShadow: [
BoxShadow(
blurRadius: 3,
spreadRadius: 0,
offset: Offset(0, 4),
color: Color(0xff000000).withOpacity(0.3),
),
], color: Colors.white),
child: Center(
child: Text(
label,
style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.black),
textAlign: TextAlign.center,
),
),
),
),
);
}
Widget imageButton({
required Function onTap,
required String image,
}) {
return ScaleGesture(
onTap: onTap,
child: Container(
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
blurRadius: 3,
spreadRadius: 0,
offset: Offset(0, 4),
color: Color(0xff000000).withOpacity(0.3),
),
],
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Image.asset(
'assets/images/$image.png',
fit: BoxFit.fitWidth,
),
),
);
}
}
class ScaleGesture extends StatefulWidget {
final Widget child;
final double scale;
final Function onTap;
ScaleGesture({
required this.child,
this.scale = 1.1,
required this.onTap,
});
[@override](/user/override)
_ScaleGestureState createState() => _ScaleGestureState();
}
class _ScaleGestureState extends State<ScaleGesture> {
late double scale;
[@override](/user/override)
void initState() {
scale = 1;
super.initState();
}
[@override](/user/override)
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (detail) {
setState(() {
scale = widget.scale;
});
},
onTapCancel: () {
setState(() {
scale = 1;
});
},
onTapUp: (datail) {
setState(() {
scale = 1;
});
widget?.onTap();
},
child: Transform.scale(
scale: scale,
child: widget.child,
),
);
}
}
更多关于Flutter波斯时间选择器插件persian_time_selector的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter波斯时间选择器插件persian_time_selector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
persian_time_selector 是一个用于 Flutter 的波斯时间选择器插件，允许用户选择时间和日期，并以波斯（伊朗）日历格式显示。这个插件特别适用于需要在应用中使用波斯日历格式的开发者。
安装插件
首先，你需要在 pubspec.yaml 文件中添加 persian_time_selector 插件的依赖：
dependencies:
flutter:
sdk: flutter
persian_time_selector: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
使用 persian_time_selector
以下是一个简单的示例，展示了如何使用 persian_time_selector 插件来选择波斯时间。
import 'package:flutter/material.dart';
import 'package:persian_time_selector/persian_time_selector.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Persian Time Selector Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PersianTimeSelectorDemo(),
);
}
}
class PersianTimeSelectorDemo extends StatefulWidget {
[@override](/user/override)
_PersianTimeSelectorDemoState createState() => _PersianTimeSelectorDemoState();
}
class _PersianTimeSelectorDemoState extends State<PersianTimeSelectorDemo> {
String _selectedTime = '';
Future<void> _selectTime(BuildContext context) async {
final selectedTime = await showPersianTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (selectedTime != null) {
setState(() {
_selectedTime = selectedTime.format(context);
});
}
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Persian Time Selector'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Selected Time: $_selectedTime',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _selectTime(context),
child: Text('Select Time'),
),
],
),
),
);
}
}