Flutter日历日程管理插件 calendar_day_slot_navigator 的使用

概述

calendar_day_slot_navigator 是一个功能强大且高度可定制的Flutter日历小部件，使日期选择变得美观和直观。无论是构建预订应用、调度系统还是任何需要优雅日期选择的应用程序，它都提供了所需的灵活性和功能。

特性

主题支持

• 无缝集成浅色和深色模式
• 完全控制颜色和渐变
• 自定义活动和非活动状态

高级自定义

• 所有元素的灵活圆角半径
• 自定义标题文本和样式
• 可调的日框尺寸和边框
• 支持自定义字体，包括Google字体

强大的选择选项

• 单个日期选择
• 日期范围选择
• 自定义活动/非活动日期范围
• 多种日历布局选项

灵活的显示模式

• 盒子内日期显示
• 盒子外日期显示
• 不同视图大小的可调槽长

快速开始

安装

在您的pubspec.yaml中添加calendar_day_slot_navigator：

dependencies:
  calendar_day_slot_navigator: ^0.0.1

运行以下命令安装包：

flutter pub get

导入

在您的Dart文件中导入包：

import 'package:calendar_day_slot_navigator/calendar_day_slot_navigator.dart';

使用示例

基本实现

下面是一个简单的示例，帮助您快速上手：

CalendarDaySlotNavigator(
  slotLength: 5,
  dayDisplayMode: DayDisplayMode.outsideDateBox,
  headerText: "Select Date",
  onDateSelect: (selectedDate) {
    print("Selected date: $selectedDate");
  },
)

自定义样式

添加漂亮的渐变和自定义样式：

CalendarDaySlotNavigator(
  slotLength: 7,
  dayBoxHeightAspectRatio: 8,
  dayDisplayMode: DayDisplayMode.insideDateBox,
  isGradientColor: true,
  activeGradientColor: LinearGradient(
    colors: [
      Color(0xffb644ae),
      Color(0xff873999),
    ],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  monthYearTabBorderRadius: 15,
  dayBoxBorderRadius: 10,
  headerText: "Select Your Preferred Date",
  fontFamilyName: "Roboto",
  isGoogleFont: true,
  dayBorderWidth: 0.5,
  onDateSelect: (selectedDate) {
    print("Selected date: $selectedDate");
  },
)

日期范围选择

实现具有特定活动日期的日期范围选择：

CalendarDaySlotNavigator(
  dateSelectionType: DateSelectionType.activeRangeDates,
  rangeDates: [
    DateTime(2024, 6, 1),
    DateTime(2024, 6, 2),
    DateTime(2024, 6, 3),
    DateTime(2024, 6, 4),
    DateTime(2024, 6, 5),
  ],
  onDateSelect: (selectedDate) {
    print("Selected date within range: $selectedDate");
  },
)

属性指南

基本属性

样式属性

字体属性

选择属性

显示模式

外部日期框模式

dayDisplayMode: DayDisplayMode.outsideDateBox

• 日期名称出现在日期框上方
• 提供干净、分离的外观
• 更多空间用于日期数字

内部日期框模式

dayDisplayMode: DayDisplayMode.insideDateBox

• 日期名称出现在日期框内部
• 更紧凑的布局
• 适合空间有限的设计

示例代码

完整的示例代码如下：

import 'package:calendar_day_slot_navigator/calendar_day_slot_navigator.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',
      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> {
  DateTime varSelectedDate = DateTime.now();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffffffff),
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: CalendarDaySlotNavigator(
        slotLength: 6, // 每次显示多少天
        dayBoxHeightAspectRatio: 5, // 设置动态高度的日框
        dayDisplayMode: DayDisplayMode.outsideDateBox, // 两种设计变体：DayDisplayMode.outsideDateBox 和 DayDisplayMode.inDateBox
        activeColor: const Color(0xffb644ae), // 设置已选日期的背景颜色
        deActiveColor: const Color(0xffffffff), // 设置未选日期的背景颜色
        monthYearTabBorderRadius: 15, // 调整月和年标签的圆角半径
        dayBoxBorderRadius: 10, // 设置日框的圆角半径
        headerText: "Select Date", // 自定义此小部件的标题文本
        onDateSelect: (selectedDate) {}, // 获取用户点击的选定日期
        dateSelectionType: DateSelectionType.deActiveRangeDates, // 设置启用和禁用日期的场景
        rangeDates: [
          // 添加日期范围以用于dateSelectionType场景
          DateTime(2024, 6, 9), DateTime(2024, 6, 6), DateTime(2024, 6, 8),
        ],
        fontFamilyName: "Lato", // 设置自定义字体或Google字体名称
        isGoogleFont: true, // 设置为true以使用Google字体
        dayBorderWidth: 0.5, // 设置日框边框宽度
      ),
    );
  }
}