Flutter日历插件kithya_flutter_calendar的使用

Flutter日历插件kithya_flutter_calendar的使用

现代日历小部件具有有用的功能。可以让你快速开发设计良好的日历。

灵感来源于Google日历的UI

使用

事件

你可以在日历中展示事件，通过将CalendarEvent列表插入到events属性中。

CellCalendar(
  events: [
    CalendarEvent(eventName: "Event 1", eventDate: DateTime(2024, 1, 25)),
    CalendarEvent(eventName: "Event 2", eventDate: DateTime(2024, 1, 26)),
  ]
);

如果你需要自定义日历，可以使用如eventBackGroundColor、eventTextColor 和 eventID等附加参数。

onPageChanged

当当前页面更改时，回调onPageChanged会被调用。

CellCalendar(
  onPageChanged: (firstDate, lastDate) {
    print("This is the first date of the new page: $firstDate");
    print("This is the last date of the new page: $lastDate");
  }
);

在这个示例代码中，firstDate是新页面第一个单元格的日期，其逻辑与lastDate相同。

onCellTapped

当用户点击一个单元格时，回调onCellTapped会被调用。

CellCalendar(
  onCellTapped: (date) {
    print("$date is tapped !");
    final eventsOnTheDate = sampleEvents().where((event) {
      final eventDate = event.eventDate;
      return eventDate.year == date.year &&
          eventDate.month == date.month &&
          eventDate.day == date.day;
    }).toList();
    /// ex) Show dialog or navigate to new page with [eventsOnTheDate]
  }
);

你可以获取点击日期上的事件，并进行进一步的操作，例如弹出对话框或导航到新的页面。

daysOfTheWeekBuilder 和 monthYearLabelBuilder

如果你不想使用默认的标签，可以使用回调来自定义它们。

CellCalendar(
  daysOfTheWeekBuilder: (dayIndex) {
    /// dayIndex: 0 for Sunday, 6 for Saturday.
    final labels = ["S", "M", "T", "W", "T", "F", "S"];
    return Padding(
      padding: const EdgeInsets.only(bottom: 4.0),
      child: Text(
        labels[dayIndex],
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
        textAlign: TextAlign.center,
      ),
    );
  },
  monthYearLabelBuilder: (datetime) {
    final year = datetime.year.toString();
    final month = datetime.month.toString();
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Text(
        "$month, $year",
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  },
)

开发者

由Um Kithya（资深Flutter开发者）用心制作。

完整示例代码

import 'dart:async';

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

import 'sample_event.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 Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final events = sampleEvents();
    final cellCalendarPageController = CellCalendarPageController();
    return Scaffold(
      appBar: AppBar(
        // 尝试改变这里的颜色以查看AppBar的颜色变化。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(bottom: 20),
        child: CellCalendar(
          todayMarkColor: Colors.blue,
          todayTextColor: Colors.black,
          weekProperty: WeekProperty(
            sundayColor: Colors.red,
          ),
          dateTextStyle: const TextStyle(fontSize: 16),
          cellCalendarPageController: cellCalendarPageController,
          events: events,
          onCellTapped: (date) async {
            final eventsOnTheDate = events.where((event) {
              final eventDate = event.eventDate;
              return eventDate.year == date.year &&
                  eventDate.month == date.month &&
                  eventDate.day == date.day;
            }).toList();

            await showDialog(
                barrierDismissible: true,
                context: context,
                builder: (BuildContext dialogContext) {
                  return AlertDialog(
                    title: Text("${date.month.monthName} ${date.day}"),
                    content: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: eventsOnTheDate
                          .map(
                            (event) => Container(
                              width: double.infinity,
                              padding: const EdgeInsets.all(4),
                              margin: const EdgeInsets.only(bottom: 12),
                              color: event.eventBackgroundColor,
                              child: Text(
                                event.eventName,
                                style: event.eventTextStyle,
                              ),
                            ),
                          )
                          .toList(),
                    ),
                  );
                });
            return true;
          },
          onPageChanged: (firstDate, lastDate) {
            /// 当页面更改时调用
            /// 如果需要，可以使用[firstDate]和[lastDate]之间的范围来获取额外的事件。
          },
        ),
      ),
    );
  }
}