Flutter日程视图插件flutter_schedule_view的使用

Flutter日程视图插件flutter_schedule_view的使用

一个功能丰富的Flutter日视图控件，支持高度定制的事件列表显示、拖拽、调整大小等功能。

本项目的原始代码来自FlutterWeekView。

截图

拖拽和调整大小	亮色模式	暗色模式

功能特点

• 高度可定制：轻松定制时间表视图以符合你的应用风格。
• 拖拽支持：允许用户在计划中拖放事件。
• 调整大小：支持上下拖拉视图调整事件的持续时间。
• 模式切换：无缝支持亮色和暗色模式切换。

安装

将以下依赖添加到项目的pubspec.yaml文件中：

dependencies:
  flutter_schedule_view: ^0.1.0

使用

以下是一个完整的示例代码，展示了如何使用flutter_schedule_view插件来创建一个日程视图。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<FlutterWeekViewEvent> events = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化事件列表
    events.addAll([
      FlutterWeekViewEvent(
        padding: EdgeInsets.only(left: 2, right: 2),
        title: '周迭代需求评审',
        description: '张三的预定',
        eventTextBuilder: meetingEventTextBuilder,
        start: HourMinute(hour: 7).atDate(DateTime.now()),
        end: HourMinute(hour: 8).atDate(DateTime.now()),
        decoration: () => meetingEventDecoration(context),
        onTap: (event) => debugPrint('Event 1 has been tapped !'),
      ),
      FlutterWeekViewEvent(
        padding: EdgeInsets.only(left: 2, right: 2),
        title: '富文本技术分享讨论会',
        description: '李四的预定',
        eventTextBuilder: meetingEventTextBuilder,
        start: HourMinute(hour: 8).atDate(DateTime.now()),
        end: HourMinute(hour: 10).atDate(DateTime.now()),
        decoration: () => meetingEventDecoration(context),
        onTap: (event) => debugPrint('Event 2 has been tapped !'),
      ),
      FlutterWeekViewEvent(
        padding: EdgeInsets.only(left: 2, right: 2),
        title: '研发流程管理会',
        description: '王五的预定',
        eventTextBuilder: meetingEventTextBuilder,
        start: HourMinute(hour: 12).atDate(DateTime.now()),
        end: HourMinute(hour: 13).atDate(DateTime.now()),
        decoration: () => meetingEventDecoration(context),
        onTap: (event) => debugPrint('Event 3 has been tapped !'),
      )
    ]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日程视图'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: DayView(
          // 显示日期
          date: DateTime.now(),
          initialTime: const HourMinute(hour: 6),
          userZoomable: false,
          showTimeRangeText: true,
          // 事件列表
          events: events,
          // 风格
          style: DayViewStyle(
            // 背景颜色
            backgroundColor: Colors.white,
            // 每个小时高度
            hourRowHeight: 60,
            // 分割线颜色
            backgroundRulesColor: Color(0xFFE5E5E5),
            currentTimeRuleColor: Colors.blue,
            currentTimeCircleColor: Colors.blue,
            currentTimeCircleRadius: 5,
            currentTimeRuleHeight: 1,
            currentTimeCirclePosition: CurrentTimeCirclePosition.left,
            currentTimeTextStyle: TextStyle(
              color: Colors.blue,
              fontSize: 12,
              fontWeight: FontWeight.w400,
              height: 1.5,
            ),
          ),
          // 左侧时间文本风格
          hoursColumnStyle: HoursColumnStyle(
            width: 55,
            color: Colors.white,
            textAlignment: Alignment.center,
            textStyle: TextStyle(
                color: Colors.grey,
                fontSize: 12,
                fontWeight: FontWeight.w400,
                height: 1.5),
            timeRangeTextStyle: TextStyle(
              color: Colors.blue,
              fontSize: 12,
              fontWeight: FontWeight.w400,
              height: 1.5,
            ),
            interval: const Duration(hours: 1),
          ),
          // 拖拽选项
          dragAndDropOptions: DragAndDropOptions(
            startingGesture: isMobilePlatform()
                ? DragStartingGesture.longPress
                : DragStartingGesture.tap,
            onEventDragged: (FlutterWeekViewEvent event, DateTime newStartTime) {
              // 处理拖拽逻辑
              DateTime roundedTime = roundTimeToFitGrid(newStartTime,
                  gridGranularity: const Duration(minutes: 15));
              event.shiftEventTo(roundedTime);
            },
          ),
          // 调整大小选项
          resizeEventOptions: ResizeEventOptions(
            minimumEventDuration: const Duration(minutes: 30),
            // 处理上拉逻辑
            onEventResizedUp: (FlutterWeekViewEvent event, DateTime newStartTime) {
              event.start = newStartTime;
            },
            onEventResizeUpUpdate:
                (FlutterWeekViewEvent event, DateTime newStartTime) {
              event.start = newStartTime;
            },
            // 处理下拉逻辑
            onEventResizedDown: (FlutterWeekViewEvent event, DateTime newEndTime) {
              event.end = newEndTime;
            },
            onEventResizeDownUpdate:
                (FlutterWeekViewEvent event, DateTime newEndTime) {
              event.end = newEndTime;
            },
          ),
          // 是否可以拖放
          dragPredicate: (event) {
            return event.isNewEvent;
          },
          // 是否可以调整大小
          resizePredicate: (event) {
            return event.isNewEvent;
          },
          // 背景点击事件
          onBackgroundTappedDown: (DateTime dateTime) {
            dateTime = roundTimeToFitGrid(dateTime,
                gridGranularity: const Duration(minutes: 15));
            setState(() {
              events.removeWhere((element) => element.isNewEvent);
              events.add(
                FlutterWeekViewEvent(
                  title: '新事件',
                  description: '新事件描述',
                  padding: EdgeInsets.only(left: 16, right: 16),
                  decoration: () => newEventDecoration(context),
                  eventTextBuilder: createEventTextBuilder,
                  start: dateTime,
                  end: dateTime.add(const Duration(minutes: 30)),
                  isNewEvent: true,
                  onTap: (event) {
                    print('+++++++++++++++++++++onTap');
                  },
                ),
              );
            });
          },
        ),
      ),
    );
  }
}