Flutter日历插件streak_calendar的使用
Flutter日历插件streak_calendar的使用
简介
streak_calendar 是一个功能强大的 Flutter 日历插件，可以帮助你创建自定义的日历视图。它支持多种定制选项，如显示日期为连续天数（streaks）、自定义月份和星期视图、选择特定日期等。
安装
在 pubspec.yaml 文件中添加依赖：
dependencies:
streak_calendar: ^latest_version
然后运行 flutter pub get 来安装插件。
基本用法
以下是一个简单的示例，展示如何使用 streak_calendar 插件：
import 'package:flutter/material.dart';
import 'package:streak_calendar/streak_calendar.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Calendar App',
theme: ThemeData(useMaterial3: true),
darkTheme: ThemeData.dark(useMaterial3: true),
themeMode: ThemeMode.light,
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 2,
title: const Text("Calendar"),
),
body: CleanCalendar(
datesForStreaks: [
DateTime(2024, 5, 31),
DateTime(2024, 6, 1),
DateTime(2024, 6, 2),
DateTime(2024, 6, 3),
DateTime(2024, 6, 4),
DateTime(2024, 6, 5),
DateTime(2024, 6, 6),
DateTime(2024, 6, 9),
DateTime(2024, 6, 10),
DateTime(2024, 6, 15),
DateTime(2024, 6, 17),
DateTime(2024, 6, 26),
DateTime(2024, 6, 28),
DateTime(2024, 6, 30),
DateTime(2024, 7, 1),
DateTime(2024, 7, 2),
DateTime(2024, 7, 3),
DateTime(2024, 7, 4),
DateTime(2024, 7, 7),
DateTime(2024, 7, 8),
DateTime(2024, 7, 9),
DateTime(2024, 7, 10),
DateTime(2024, 7, 11),
DateTime(2024, 7, 12),
DateTime(2024, 7, 13),
DateTime(2024, 7, 14),
DateTime(2024, 7, 15),
DateTime(2024, 7, 16),
DateTime(2024, 7, 19),
DateTime(2024, 7, 5),
DateTime(2024, 7, 6),
DateTime(2024, 7, 17),
DateTime(2024, 7, 18),
DateTime(2024, 7, 21),
DateTime(2024, 7, 22),
DateTime(2024, 7, 27),
DateTime(2024, 7, 28),
DateTime(2024, 7, 29),
DateTime(2024, 7, 31),
DateTime(2024, 8, 1),
],
datesForSkips: [
DateTime(2024, 6, 10),
DateTime(2024, 6, 22),
DateTime(2024, 6, 29),
DateTime(2024, 7, 26),
],
datesForFails: [
DateTime(2024, 6, 7),
DateTime(2024, 6, 20),
DateTime(2024, 6, 21),
DateTime(2024, 6, 23),
DateTime(2024, 6, 24),
DateTime(2024, 6, 25),
DateTime(2024, 7, 23),
DateTime(2024, 7, 24),
],
streakDatesProperties: DatesProperties(
datesDecoration: DatesDecoration(
datesBorderRadius: 10,
datesBackgroundColor: Colors.green[400],
datesBorderColor: Colors.green[400],
datesTextColor: Colors.white,
),
),
skipDatesProperties: DatesProperties(
datesDecoration: DatesDecoration(
datesBorderRadius: 10,
datesBackgroundColor: Colors.white,
datesBorderColor: Colors.green[400],
datesTextColor: Colors.grey,
),
),
failDatesProperties: DatesProperties(
datesDecoration: DatesDecoration(
datesBorderRadius: 10,
datesBackgroundColor: Colors.white,
datesBorderColor: Colors.red,
datesTextColor: Colors.red,
),
),
currentDateProperties: DatesProperties(
datesDecoration: DatesDecoration(
datesBorderRadius: 10,
datesBackgroundColor: Colors.green[400],
datesBorderColor: Colors.green[400],
datesTextColor: Colors.white,
),
),
generalDatesProperties: DatesProperties(
datesDecoration: DatesDecoration(
datesBorderRadius: 10,
datesBackgroundColor: Colors.white,
datesBorderColor: Colors.red,
datesTextColor: Colors.grey,
),
),
startWeekday: WeekDay.monday,
leadingTrailingDatesProperties: DatesProperties(
disable: true,
hide: false,
datesDecoration: DatesDecoration(
datesBorderRadius: 10,
datesBackgroundColor: Colors.white,
datesBorderColor: Colors.white,
datesTextColor: const Color(0xFFB9B9B9),
),
),
),
);
}
}
自定义选项
1. 自定义日期边界行为和点击行为
CleanCalendar(
enableDenseViewForDates: true,
enableDenseSplashForDates: true,
)
2. 禁用和隐藏不同类型的日期
CleanCalendar(
leadingTrailingDatesProperties: DatesProperties(
disable: true,
hide: true,
),
)
3. 自定义日期样式
CleanCalendar(
currentDateProperties: DatesProperties(
datesDecoration: DatesDecoration(
datesBorderRadius: 1000,
datesBackgroundColor: Colors.lightGreen.shade100,
datesBorderColor: Colors.green,
datesTextColor: Colors.black,
),
),
)
4. 自定义星期头
CleanCalendar(
weekdaysProperties: WeekdaysProperties(
generalWeekdaysDecoration: WeekdaysDecoration(weekdayTextColor: Colors.red),
sundayDecoration: WeekdaysDecoration(
weekdayTextColor: Colors.green,
weekdayTextStyle: Theme.of(context).textTheme.headlineMedium,
),
saturdayDecoration: WeekdaysDecoration(
weekdayTextColor: Colors.green,
weekdayTextStyle: Theme.of(context).textTheme.headlineMedium,
),
),
)
5. 自定义导航头
CleanCalendar(
headerProperties: HeaderProperties(
monthYearDecoration: MonthYearDecoration(
monthYearTextColor: Colors.amber,
monthYearTextStyle: Theme.of(context).textTheme.labelMedium,
),
navigatorDecoration: NavigatorDecoration(
navigatorResetButtonIcon: const Icon(Icons.restart_alt, color: Colors.amber),
navigateLeftButtonIcon: const Icon(Icons.arrow_circle_left, color: Colors.amber),
navigateRightButtonIcon: const Icon(Icons.arrow_circle_right, color: Colors.amber),
),
),
)
6. 日期选择
CleanCalendar(
dateSelectionMode: DatePickerSelectionMode.singleOrMultiple,
onSelectedDates: (List<DateTime> value) {
if (selectedDates.contains(value.first)) {
selectedDates.remove(value.first);
} else {
selectedDates.add(value.first);
}
setState(() {});
},
selectedDates: selectedDates,
)
7. 切换日历视图类型
CleanCalendar(
datePickerCalendarView: DatePickerCalendarView.weekView,
)
8. 设置日历起始星期
CleanCalendar(
startWeekday: WeekDay.monday,
)
9. 自定义星期和月份符号
CleanCalendar(
weekdaysSymbol: const Weekdays(
sunday: "S",
monday: "M",
tuesday: "T",
wednesday: "W",
thursday: "T",
friday: "F",
saturday: "S",
),
monthsSymbol: const Months(
january: "Jan",
february: "Feb",
march: "Mar",
april: "Apr",
may: "May",
june: "Jun",
july: "Jul",
august: "Aug",
september: "Sep",
october: "Oct",
november: "Nov",
december: "Dec",
),
)
10. 获取选中的日期
CleanCalendar(
onSelectedDates: (List<DateTime> selectedDates) {
print(selectedDates);
},
)
11. 提供预选日期
CleanCalendar(
selectedDates: [
DateTime(2024, 6, 6),
DateTime(2024, 6, 9),
DateTime(2024, 6, 11),
],
)
12. 设置日历的起止日期
CleanCalendar(
startDateOfCalendar: DateTime(2024, 6, 5),
endDateOfCalendar: DateTime(2024, 10, 15),
)
13. 设置初始月视图
CleanCalendar(
initialViewMonthDateTime: DateTime(2024, 9, 5),
)
14. 设置当前日期
CleanCalendar(
currentDateOfCalendar: DateTime(2024, 9, 5),
)
15. 监听日历视图变化
CleanCalendar(
onCalendarViewDate: (DateTime calendarViewDate) {
print(calendarViewDate);
},
)
其他信息
streak_calendar 插件还在持续开发中，未来将支持更多功能，如完整的文档、更多的自定义选项、更多的日历视图类型等。如果你有任何问题或建议，可以通过 GitHub issues 联系开发者。
希望这些信息对你有所帮助！如果你有任何其他问题，请随时提问。
更多关于Flutter日历插件streak_calendar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter日历插件streak_calendar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，关于Flutter日历插件streak_calendar的使用，以下是一个基本的使用案例，包括如何在Flutter项目中集成和使用这个插件。
首先，确保你已经在pubspec.yaml文件中添加了streak_calendar的依赖：
dependencies:
flutter:
sdk: flutter
streak_calendar: ^最新版本号 # 请替换为实际最新版本号
然后，运行flutter pub get来安装依赖。
接下来，在你的Flutter项目中，你可以按照以下步骤使用streak_calendar插件：
- 导入插件：
import 'package:streak_calendar/streak_calendar.dart';
- 创建一个简单的页面来使用日历：
import 'package:flutter/material.dart';
import 'package:streak_calendar/streak_calendar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<DateTime> selectedDates = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Streak Calendar Example'),
),
body: Center(
child: StreakCalendar(
initialSelectedDates: selectedDates,
firstDay: DateTime(2023),
lastDay: DateTime(2024),
onDateSelected: (date, selected) {
setState(() {
if (selected) {
selectedDates.add(date);
} else {
selectedDates.remove(date);
}
});
},
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
dayBuilder: (context, date, selected) {
return Container(
decoration: BoxDecoration(
color: selected ? Colors.blue.withOpacity(0.3) : Colors.transparent,
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: Text(
date.day.toString(),
style: TextStyle(
color: selected ? Colors.white : Colors.black,
fontSize: 16,
),
),
),
);
},
),
),
);
}
}
在这个例子中，我们创建了一个简单的Flutter应用，其中包含一个StreakCalendar组件。我们设置了初始日期范围（从2023年到2024年），并定义了一个onDateSelected回调函数来处理日期选择事件。当用户选择或取消选择日期时，我们更新selectedDates列表。我们还自定义了每个日期的显示样式，使用dayBuilder属性来创建一个带有选中效果的容器。
请确保你已经按照Flutter和Dart的最佳实践来组织你的代码，并根据你的具体需求调整这个基本示例。如果你需要更高级的功能，如处理日期范围选择、禁用特定日期等，你可以查阅streak_calendar的官方文档以获取更多信息和示例。
