Flutter波斯日历插件flutter_persian_calendar的使用

Flutter Persian Calendar插件提供了一个简单且可定制的波斯（Jalali）日历小部件，可以轻松集成到你的Flutter项目中。该插件基于shamsi_date包。

功能

• 日期过滤：可以通过设置起始和结束日期来过滤显示的日期。
• 自定义选项：可以根据应用程序的主题自定义日历的外观。

使用方法

添加依赖

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_persian_calendar: ^0.0.2

然后运行以下命令以获取依赖项：

flutter pub get

导入包

在你的库文件中导入该包：

import 'package:flutter_persian_calendar/flutter_persian_calendar.dart';

示例代码

创建一个按钮让用户选择日期

ElevatedButton(
   onPressed: () {
     // 显示带有日历的对话框
     showDialog(
       context: context,
       builder: (context) {
         return Dialog(
           child: shamsiDateCalendarWidget(context, calendarDarkTheme),
         );
       },
     );
   },
   child: const Text('Select Date'),
 );

// 可以创建一个基础的日历小部件以展示不同的主题
PersianCalendar shamsiDateCalendarWidget(
  BuildContext context,
  PersianCalendarTheme calendarTheme,
) {
  return PersianCalendar(
    calendarHeight: 376, // 设置日历小部件的高度为376
    calendarWidth: 360, // 设置日历小部件的宽度为360
    selectedDate: selectedDate, // 初始化时显示的选中日期
    onDateChanged: (newDate) {
      setState(() {
        selectedDate = newDate; // 更新选中的日期
      });
    },
    onConfirmButtonPressed: () {
      Navigator.pop(context); // 用户点击确认按钮时关闭对话框
    },
    calendarStartDate: Jalali(1300, 4, 12), // 日历从1300/4/12开始显示
    calendarEndDate: Jalali(1402, 7, 10), // 日历直到1402/7/10结束显示
    calendarTheme: calendarTheme, // 设置传递过来的主题
  );
}

自定义主题

你可以通过修改PersianCalendarTheme中的颜色、文本样式、高度和宽度等来自定义日历的外观。下面是一个自定义的浅色主题示例：

PersianCalendarTheme lightTheme = PersianCalendarTheme(
  backgroundColor: const Color(0XFFEDF2F4),
  selectedColor: const Color(0XFFEF233C),
  headerBackgroundColor: const Color(0XFF8D99AE),
  textStyle: const TextStyle(
    fontSize: 14,
    color: Colors.black,
  ),
  selectedItemTextStyle: const TextStyle(
    fontSize: 14,
    color: Color(0XFFF2F2F2),
  ),
  confirmButtonTextStyle: const TextStyle(
    fontSize: 14,
    color: Color(0XFFF2F2F2),
  ),
  headerTextStyle: const TextStyle(
    fontSize: 14,
    color: Colors.black,
  ),
);

完整示例 Demo

import 'package:flutter/material.dart';
import 'package:flutter_persian_calendar/flutter_persian_calendar.dart';
import 'package:shamsi_date/shamsi_date.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Persian Calendar Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        fontFamily: 'Vazirmatn',
      ),
      home: const MyHomePage(title: 'Flutter Persian Calendar'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Jalali selectedDate = Jalali(1360, 1, 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Persian Calendar Widgets',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Text(
              'Selected Date: ${selectedDate.year}/${selectedDate.month}/${selectedDate.day}',
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return Dialog(
                      child: shamsiDateCalendarWidget(context, lightTheme),
                    );
                  },
                );
              },
              child: const Text('Select Date (With Light Theme)'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return Dialog(
                      child: shamsiDateCalendarWidget(context, darkTheme),
                    );
                  },
                );
              },
              child: const Text('Select Date (With Dark Theme)'),
            ),
          ],
        ),
      ),
    );
  }

  PersianCalendar shamsiDateCalendarWidget(
    BuildContext context,
    PersianCalendarTheme calendarTheme,
  ) {
    return PersianCalendar(
      calendarHeight: 376,
      calendarWidth: 360,
      selectedDate: selectedDate,
      onDateChanged: (newDate) {
        setState(() {
          selectedDate = newDate;
        });
      },
      onConfirmButtonPressed: () {
        Navigator.pop(context);
      },
      calendarStartDate: Jalali(1300, 4, 12),
      calendarEndDate: Jalali(1402, 7, 10),
      calendarTheme: calendarTheme,
    );
  }
}

贡献

欢迎社区贡献！如果你想为Flutter Persian Calendar的发展做出贡献，请遵循以下指南：

报告问题

如果你遇到任何问题或有改进建议，请在GitHub issue tracker上打开一个问题。报告问题时，请提供详细信息，包括重现步骤和你的环境（Flutter版本、平台等）。

进行更改

1. Fork仓库。
2. 为你的功能或修复创建一个新分支：git checkout -b feature/my-feature 或 git checkout -b bugfix/fix-issue。
3. 进行更改并彻底测试。
4. 提交更改：git commit -m 'Add some feature'。
5. 推送到分支：git push origin feature/my-feature。
6. 提交拉取请求。

请随意根据你的喜好使用或修改此版本！