Flutter日期选择插件jhijri_picker的使用

发布于 1周前 作者 nodeper 来自 Flutter

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

1 回复

更多关于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'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖添加:在pubspec.yaml中添加jhijri_picker依赖。
  2. 导入插件:在需要使用日期选择器的Dart文件中导入jhijri_picker
  3. 创建UI
    • 使用Scaffold创建一个简单的页面布局。
    • 使用Text显示当前选中的日期(如果有的话)。
    • 使用ElevatedButton创建一个按钮,点击时调用_selectDate方法来显示日期选择器。
  4. 选择日期
    • showHijriDatePicker函数用于显示日期选择器对话框。
    • initialDate设置为当前选中的日期(如果为空则使用当前日期)。
    • firstDatelastDate设置可选日期的范围。
    • 选择日期后,更新UI以显示选中的日期。

这样,你就可以在Flutter应用中使用jhijri_picker来选择Hijri日期了。记得根据实际需求调整代码中的参数和UI布局。

回到顶部