Flutter时间线日历插件flutter_timeline_calendar的使用

Flutter时间线日历插件flutter_timeline_calendar的使用

1. 插件简介

flutter_timeline_calendar 是一个用于Flutter应用的时间线日历插件，支持Gregorian（公历）和Jalali（波斯历）两种日历类型。该插件提供了丰富的自定义选项，可以轻松地创建美观且功能强大的日历界面。

2. 安装步骤

要使用 flutter_timeline_calendar 插件，首先需要在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_timeline_calendar: ^1.0.9

然后通过命令行安装依赖包：

$ flutter pub get

或者，如果你的编辑器支持 flutter pub get，可以直接在编辑器中执行该操作。

3. 引入插件

在Dart代码中引入 flutter_timeline_calendar 插件：

import 'package:flutter_timeline_calendar/flutter_timeline_calendar.dart';

4. 基本用法

以下是一个完整的示例代码，展示了如何使用 flutter_timeline_calendar 创建一个简单的日历界面：

import 'package:flutter/material.dart';
import 'package:flutter_timeline_calendar/timeline/model/calendar_options.dart';
import 'package:flutter_timeline_calendar/timeline/model/datetime.dart';
import 'package:flutter_timeline_calendar/timeline/model/day_options.dart';
import 'package:flutter_timeline_calendar/timeline/model/headers_options.dart';
import 'package:flutter_timeline_calendar/timeline/provider/instance_provider.dart';
import 'package:flutter_timeline_calendar/timeline/utils/calendar_types.dart';
import 'package:flutter_timeline_calendar/timeline/utils/datetime_extension.dart';
import 'package:flutter_timeline_calendar/timeline/widget/timeline_calendar.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Timeline Calendar Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Timeline Calendar Example'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late CalendarDateTime selectedDateTime;
  late DateTime? weekStart;
  late DateTime? weekEnd;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化日历提供者
    TimelineCalendar.calendarProvider = createInstance();
    // 获取当前日期
    selectedDateTime = TimelineCalendar.calendarProvider.getDateTime();
    // 获取当前周的起始和结束日期
    getLatestWeek();
  }

  // 获取当前周的起始和结束日期
  void getLatestWeek() {
    setState(() {
      weekStart = selectedDateTime.toDateTime().findFirstDateOfTheWeek();
      weekEnd = selectedDateTime.toDateTime().findLastDateOfTheWeek();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          _timelineCalendar(),
        ],
      ),
    );
  }

  // 创建时间线日历
  Widget _timelineCalendar() {
    return TimelineCalendar(
      // 设置日历类型为公历
      calendarType: CalendarType.GREGORIAN,
      // 设置日历语言为英文
      calendarLanguage: "en",
      // 设置日历选项
      calendarOptions: CalendarOptions(
        // 设置初始视图为每日视图
        viewType: ViewType.DAILY,
        // 允许切换视图类型（每日/每月）
        toggleViewType: true,
        // 设置月头卡的阴影高度
        headerMonthElevation: 10,
        // 设置月头卡的阴影颜色
        headerMonthShadowColor: Colors.black26,
        // 设置月头卡的背景颜色
        headerMonthBackColor: Colors.transparent,
        // 设置周的起始日期
        weekStartDate: weekStart,
        // 设置周的结束日期
        weekEndDate: weekEnd,
      ),
      // 设置天选项
      dayOptions: DayOptions(
        // 启用紧凑模式
        compactMode: true,
        // 设置日期字体大小
        dayFontSize: 14.0,
        // 禁用淡出效果
        disableFadeEffect: true,
        // 设置选中的星期几的颜色
        weekDaySelectedColor: const Color(0xff3AC3E2),
        // 为今天设置不同的样式
        differentStyleForToday: true,
        // 设置今天的背景颜色
        todayBackgroundColor: Colors.black,
        // 设置选中的日期背景颜色
        selectedBackgroundColor: const Color(0xff3AC3E2),
        // 设置今天的文本颜色
        todayTextColor: Colors.white,
      ),
      // 设置头部选项
      headerOptions: HeaderOptions(
        // 设置星期几的显示格式（短格式）
        weekDayStringType: WeekDayStringTypes.SHORT,
        // 设置月份的显示格式（完整格式）
        monthStringType: MonthStringTypes.FULL,
        // 设置头部背景颜色
        backgroundColor: const Color(0xff3AC3E2),
        // 设置头部文本大小
        headerTextSize: 14,
        // 设置头部文本颜色
        headerTextColor: Colors.black,
      ),
      // 当日期发生变化时的回调
      onChangeDateTime: (dateTime) {
        print("Date Change $dateTime");
        selectedDateTime = dateTime;
        getLatestWeek();
      },
      // 当重置日期时的回调
      onDateTimeReset: (resetDateTime) {
        print("Date Reset $resetDateTime");
        selectedDateTime = resetDateTime;
        getLatestWeek();
      },
      // 当月份发生变化时的回调
      onMonthChanged: (monthDateTime) {
        print("Month Change $monthDateTime");
        selectedDateTime = monthDateTime;
        getLatestWeek();
      },
      // 当年份发生变化时的回调
      onYearChanged: (yearDateTime) {
        print("Year Change $yearDateTime");
        selectedDateTime = yearDateTime;
        getLatestWeek();
      },
      // 设置当前选中的日期
      dateTime: selectedDateTime,
    );
  }
}