Flutter日历管理插件easy_tech_calendar的使用

Easy Tech Calendar

一个高度可定制且用户友好的Flutter日历小部件。easy_tech_calendar 小部件允许用户以多种模式（范围选择或多选）选择日期，并提供了丰富的自定义选项，如颜色、边框和本地化支持。

特性

• 范围选择：允许用户选择日期范围。
• 多选：用户可以单独选择多个日期。
• 自定义：可以自定义选定和未选定日期的颜色、边框和文本颜色。
• 本地化：支持周几和月份名称的本地化。
• 年份选择器：允许用户选择年份并浏览该年的月份。
• 内置控制器：使用 EasyCalendarController 管理选定的日期。

安装

在您的Flutter项目中添加 easy_tech_calendar 包，将以下行添加到 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  easy_tech_calendar: ^1.0.0 # 检查最新版本
  intl: ^0.18.0 # 用于日期格式化

然后运行 flutter pub get 来安装依赖。

使用

步骤 1：导入包

import 'package:easy_tech_calendar/easy_tech_calendar.dart';
import 'package:flutter/material.dart';

步骤 2：创建 EasyCalendarController

EasyCalendarController 用于管理选定的日期。它可用于处理多选或范围选择模式。

class EasyCalendarController {
  List<DateTime> selectedDays = []; // 多选模式
  DateTime? selectedMinDate; // 范围选择（最小日期）
  DateTime? selectedMaxDate; // 范围选择（最大日期）
}

步骤 3：使用 EasyCalendar 小部件

EasyCalendar 小部件可以放置在您的widget树中。您可以切换范围模式和多选模式，并通过各种属性自定义日历的外观。

import 'package:easy_tech_calendar/easy_tech_calendar.dart';
import 'package:flutter/material.dart';

class CalendarPage extends StatefulWidget {
  [@override](/user/override)
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  final EasyCalendarController _controller = EasyCalendarController();
  bool _rangeMode = false;
  String _locale = 'en'; // 设置日历的语言环境（例如 'en', 'ru', 'uz'）

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Calendar'),
        actions: [
          IconButton(
            icon: Icon(Icons.calendar_today),
            onPressed: () {
              setState(() {
                _rangeMode = !_rangeMode; // 切换范围模式
              });
            },
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: EasyCalendar(
          rangeMode: _rangeMode, // 启用范围模式
          locale: _locale, // 设置语言环境（例如 'en', 'ru', 'uz'）
          controller: _controller,
          selectedDayColor: Colors.blue, // 自定义选定日期的颜色
          selectedDayBorderColor: Colors.blue.shade700, // 自定义选定日期的边框颜色
          selectedDayTextColor: Colors.white, // 自定义选定日期的文本颜色
          unSelectedDayColor: Colors.white, // 自定义未选定日期的颜色
          unSelectedDayBorderColor: Colors.grey.shade300, // 自定义未选定日期的边框颜色
          unSelectedDayTextColor: Colors.black, // 自定义未选定日期的文本颜色
          disabledDaysColor: Colors.grey.shade200, // 自定义禁用日期的颜色
          disabledDaysTextColor: Colors.grey, // 自定义禁用日期的文本颜色
          yearTitleColor: Colors.black87, // 自定义年份标题的颜色
          monthTitleColor: Colors.black87, // 自定义月份标题的颜色
          weakDaysColor: Colors.grey.shade500, // 自定义弱日期（例如周日）的文本颜色
        ),
      ),
    );
  }
}

步骤 4：启用本地化

如果要使用本地化功能，首先需要在应用中初始化本地化。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      supportedLocales: [
        Locale('en'), // 英文
        Locale('uz'), // 乌兹别克语
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: HomePage(),
    );
  }
}

完整示例

以下是一个完整的示例代码，展示了如何使用 easy_tech_calendar 插件来实现一个带有范围选择和多选的日历界面。

import 'package:flutter/material.dart';
import 'package:easy_tech_calendar/easy_tech_calendar.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CalendarPage(),
    );
  }
}

class CalendarPage extends StatefulWidget {
  [@override](/user/override)
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  final EasyCalendarController _controller = EasyCalendarController();
  bool _rangeMode = false;
  String _locale = 'en'; // 设置日历的语言环境（例如 'en', 'ru', 'uz'）

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Calendar'),
        actions: [
          IconButton(
            icon: Icon(Icons.calendar_today),
            onPressed: () {
              setState(() {
                _rangeMode = !_rangeMode; // 切换范围模式
              });
            },
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: EasyCalendar(
          rangeMode: _rangeMode, // 启用范围模式
          locale: _locale, // 设置语言环境（例如 'en', 'ru', 'uz'）
          controller: _controller,
          selectedDayColor: Colors.blue, // 自定义选定日期的颜色
          selectedDayBorderColor: Colors.blue.shade700, // 自定义选定日期的边框颜色
          selectedDayTextColor: Colors.white, // 自定义选定日期的文本颜色
          unSelectedDayColor: Colors.white, // 自定义未选定日期的颜色
          unSelectedDayBorderColor: Colors.grey.shade300, // 自定义未选定日期的边框颜色
          unSelectedDayTextColor: Colors.black, // 自定义未选定日期的文本颜色
          disabledDaysColor: Colors.grey.shade200, // 自定义禁用日期的颜色
          disabledDaysTextColor: Colors.grey, // 自定义禁用日期的文本颜色
          yearTitleColor: Colors.black87, // 自定义年份标题的颜色
          monthTitleColor: Colors.black87, // 自定义月份标题的颜色
          weakDaysColor: Colors.grey.shade500, // 自定义弱日期（例如周日）的文本颜色
        ),
      ),
    );
  }
}