时间规划器

一款美观、易用且可定制的 Flutter 移动端 ?, 桌面端 ? 和 Web ? 时间规划器。

这是一个用于在时间表上向用户显示任务的组件。
每一行显示一个小时，每一列显示一天，但您可以更改列标题并显示您想要的任何其他内容。

截图

移动端 黑暗
Mobile darkMobile
桌面 Web
Desktop Web

用法

1. 将依赖项添加到您的项目 pubspec.yaml 文件中
dependencies:
  time_planner: ^0.0.2
2. 导入时间规划器库
import 'package:time_planner/time_planner.dart';
3. 使用时间规划器
List<TimePlannerTask> tasks = [
  TimePlannerTask(
    // background color for task
    color: Colors.purple,
    // day: Index of header, hour: Task will be begin at this hour
    // minutes: Task will be begin at this minutes
    dateTime: TimePlannerDateTime(day: 0, hour: 14, minutes: 30),
    // duration of task
    minutes: 90,
    onTap: () {},
    child: Text(
      'this is a task',
      style: TextStyle(color: Colors.grey[350], fontSize: 12),
    ),
  ),
];

TimePlanner(
  // time will be start at this hour on table
  startHour: 6,
  // time will be end at this hour on table
  endHour: 24,
  // each header is a column and a day
  headers: [
    TimePlannerTitle(
      date: "3/10/2021",
      title: "sunday",
    ),
    TimePlannerTitle(
      date: "3/11/2021",
      title: "monday",
    ),
    TimePlannerTitle(
      date: "3/12/2021",
      title: "tuesday",
    ),
  ],
  // List of task will be show on the time planner
  tasks: tasks,
),

风格

您可以使用 TimePlannerStyle 更改时间规划器的样式

style: TimePlannerStyle(
  backgroundColor: Colors.blueGrey[900],
  // default value for height is 80
  cellHeight: 60,
  // default value for width is 80
  cellWidth: 60,
  dividerColor: Colors.white,
  showScrollBar: true,
),

当时间规划器组件加载时，它将滚动到当前本地时间，默认情况下此功能为 true，您可以关闭它，如下所示

currentTimeAnimation: false,

GitHub

https://github.com/Jamalianpour/time_planner