Flutter自定义日历展示插件custom_calendar_viewer的使用
Flutter自定义日历展示插件custom_calendar_viewer的使用
简介
custom_calendar_viewer 是一个强大的 Flutter 插件，帮助你以日历的形式查看计划或重要日期。你可以添加多个日期或日期范围，并且可以自定义每个日期的颜色、样式和提示信息。该插件支持动画效果，允许用户在月份之间平滑切换，并且支持阿拉伯语和英语两种语言。
安装
首先，在你的 pubspec.yaml 文件中添加以下依赖项：
dependencies:
custom_calendar_viewer: ^最新版本
然后运行 flutter pub get 来安装插件。
主要功能
- 多日期或多日期范围：你可以添加多个特定的日期或日期范围。
- 自定义颜色：可以为每个日期或日期范围设置背景色和文本颜色。
- 自定义样式：可以为每个文本设置自定义样式。
- 动画效果：当用户在月份之间切换时，会有平滑的动画效果。
- 多种日历类型：支持多种日历类型，如仅查看、选择单个日期、选择日期范围等。
- 语言支持：支持阿拉伯语和英语。
- 工具提示：可以为每个日期添加工具提示，提供更多详细信息。
- 自定义起始年份和结束年份：可以控制日历的起始年份和结束年份。
- 垂直或水平滚动：可以选择日历的滚动方向。
- 显示完整年份：可以显示当前年的所有月份。
使用示例
下面是一个完整的示例代码，展示了如何使用 custom_calendar_viewer 插件来创建一个包含多个日期和日期范围的日历视图。
import 'package:custom_calendar_viewer/custom_calendar_viewer.dart';
import 'package:flutter/material.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',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Calendar'),
);
}
}
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> {
String local = 'en';
List<Date> dates = [
Date(
date: DateTime(DateTime.now().year, 1, 1),
color: Colors.red,
toolTipEnMessage: 'Date Message',
toolTipArMessage: 'رسالة التاريخ',
),
Date(
date: DateTime(DateTime.now().year, 3, 1),
color: Colors.red,
toolTipEnMessage: 'Date Message',
toolTipArMessage: 'رسالة التاريخ',
),
Date(
date: DateTime(DateTime.now().year, 11, 8),
color: Colors.red,
toolTipEnMessage: 'Date Message',
toolTipArMessage: 'رسالة التاريخ',
),
Date(
date: DateTime(DateTime.now().year, 11, 10),
color: Colors.amber,
toolTipEnMessage: 'Date Message',
toolTipArMessage: 'رسالة التاريخ',
),
Date(
date: DateTime(DateTime.now().year, 11, 7),
color: Colors.amber,
),
Date(
date: DateTime(DateTime.now().year, 11, 1),
color: Colors.red,
),
Date(
date: DateTime(DateTime.now().year, 11, 4),
color: Colors.white,
textColor: Colors.red,
),
Date(
date: DateTime(DateTime.now().year, 11, 5),
color: Colors.white,
textColor: Colors.red,
icon: const Icon(
Icons.add,
size: 15,
),
),
Date(
date: DateTime(DateTime.now().year, 11, 18),
color: Colors.blue,
textColor: Colors.amber,
icon: const Icon(
Icons.add,
size: 15,
color: Colors.red,
),
),
Date(
date: DateTime(DateTime.now().year, 11, 22),
icon: const Row(
children: [
CircleAvatar(
radius: 5,
backgroundColor: Colors.red,
),
SizedBox(
width: 5,
),
Icon(
Icons.add,
size: 15,
),
],
),
),
];
List<RangeDate> ranges = [
RangeDate(
start: DateTime(DateTime.now().year, 11, 12),
end: DateTime(DateTime.now().year, 11, 15),
color: Colors.red,
icon: const Icon(
Icons.add,
size: 15,
),
toolTipEnMessage: 'Range Message',
toolTipArMessage: 'رسالة المدي',
),
RangeDate(
start: DateTime(DateTime.now().year, 11, 24),
end: DateTime(DateTime.now().year, 11, 27),
color: Colors.amber,
icon: const Icon(
Icons.add,
size: 15,
color: Colors.red,
),
toolTipEnMessage: 'Range Message',
toolTipArMessage: 'رسالة المدي',
),
RangeDate(
start: DateTime(DateTime.now().year, 11, 30),
end: DateTime(DateTime.now().year, 11, 29),
),
];
[@override](/user/override)
Widget build(BuildContext context) {
return Directionality(
textDirection: local == 'en' ? TextDirection.ltr : TextDirection.rtl,
child: Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: SingleChildScrollView(
child: Column(
children: [
const Text(
'Multi Dates And Ranges',
style: TextStyle(fontSize: 18),
),
CustomCalendarViewer(
local: local,
dates: dates,
ranges: ranges,
calendarType: CustomCalendarType.multiDatesAndRanges,
calendarStyle: CustomCalendarStyle.normal,
animateDirection: CustomCalendarAnimatedDirection.vertical,
movingArrowSize: 24,
spaceBetweenMovingArrow: 20,
closeDateBefore: DateTime.now(),
closedDatesColor: Colors.grey.withOpacity(0.7),
showBorderAfterDayHeader: true,
showTooltip: true,
toolTipMessage: '',
calendarStartDay: CustomCalendarStartDay.monday,
onCalendarUpdate: (date) {
// 处理代码
print('onCalendarUpdate');
print(date);
},
onDayTapped: (date) {
// 处理代码
print('onDayTapped');
print(date);
},
onDatesUpdated: (newDates) {
print('onDatesUpdated');
print(newDates.length);
},
onRangesUpdated: (newRanges) {
print('onRangesUpdated');
print(newRanges.length);
},
),
const Padding(
padding: EdgeInsets.symmetric(vertical: 15),
child: Divider(),
),
const Text(
'View Current Year',
style: TextStyle(fontSize: 18),
),
CustomCalendarViewer(
local: local,
dates: dates,
ranges: ranges,
calendarType: CustomCalendarType.viewFullYear,
showHeader: false,
headerAlignment: MainAxisAlignment.center,
calendarStyle: CustomCalendarStyle.normal,
spaceBetweenMovingArrow: 20,
showBorderAfterDayHeader: true,
showTooltip: true,
toolTipMessage: '',
separatedWidget: const Divider(),
calendarStartDay: CustomCalendarStartDay.monday,
onCalendarUpdate: (date) {
// 处理代码
print('onCalendarUpdate');
print(date);
},
onDayTapped: (date) {
// 处理代码
print('onDayTapped');
print(date);
},
onDatesUpdated: (newDates) {
print('onDatesUpdated');
print(newDates.length);
},
onRangesUpdated: (newRanges) {
print('onRangesUpdated');
print(newRanges.length);
},
),
],
),
),
),
),
),
);
}
}
更多关于Flutter自定义日历展示插件custom_calendar_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
