Flutter伊斯兰日期选择器插件hijri_picker的使用

Hijri Date Picker Islamic日期选择器

Flutter Widget & Picker 用于选择伊斯兰（希吉来历）日期。

Screenshots 图片

Simple Usage 简单使用方法

在 MaterialApp 中添加本地化：

localizationsDelegates: [
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
  const Locale('ar', 'SA'),
],

国际化的详细信息可以参考 国际化的Flutter应用。

调用 showHijriDatePicker 方法：

final HijriCalendar? picked = await showHijriDatePicker(
  context: context,
  initialDate: selectedDate,
  lastDate: HijriCalendar()
    ..hYear = 1442
    ..hMonth = 9
    ..hDay = 25,
  firstDate: HijriCalendar()
    ..hYear = 1438
    ..hMonth = 12
    ..hDay = 25,
  initialDatePickerMode: DatePickerMode.day,
);

As Widget 使用为组件

将 HijriMonthPicker 组件嵌入到界面中：

HijriMonthPicker(
  lastDate: HijriCalendar()
    ..hYear = 1445
    ..hMonth = 9
    ..hDay = 25,
  firstDate: HijriCalendar()
    ..hYear = 1438
    ..hMonth = 12
    ..hDay = 25,
  onChanged: (HijriCalendar value) {
    setState(() {
      selectedDate = selectedDate;
    });
  },
  selectedDate: selectedDate,
)

示例代码

以下是一个完整的示例代码，展示了如何使用 hijri_picker 插件：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:hijri/hijri_calendar.dart';
import 'package:hijri_picker/hijri_picker.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('ar', 'SA'),
      ],
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primaryColor: Colors.brown,
        accentColor: Colors.green,
        brightness: Brightness.dark,
      ),
      home: MyHomePage(title: "Umm Alqura Calendar"),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var selectedDate = new HijriCalendar.now();

  [@override](/user/override)
  Widget build(BuildContext context) {
    HijriCalendar.setLocal(Localizations.localeOf(context).languageCode);
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Padding(
        padding: const EdgeInsets.all(8.0),
        child: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                '${selectedDate.toString()}',
                style: Theme.of(context).textTheme.headline5,
              ),
              new Text(
                '${selectedDate.fullDate()}',
                style: Theme.of(context).textTheme.headline5,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () => _selectDate(context),
        tooltip: 'Pick Date',
        child: new Icon(Icons.event),
      ),
    );
  }

  Future<Null> _selectDate(BuildContext context) async {
    final HijriCalendar? picked = await showHijriDatePicker(
      context: context,
      initialDate: selectedDate,
      lastDate: new HijriCalendar()
        ..hYear = 1445
        ..hMonth = 9
        ..hDay = 25,
      firstDate: new HijriCalendar()
        ..hYear = 1438
        ..hMonth = 12
        ..hDay = 25,
      initialDatePickerMode: DatePickerMode.day,
    );
    if (picked != null)
      setState(() {
        selectedDate = picked;
      });
  }
}