Flutter时间调度插件time_scheduler_made的使用

Flutter时间调度插件time_scheduler_made的使用

time_scheduler_made 是一个用于Android和iOS的时间调度插件，允许用户通过点击单元格来创建事件，并可以编辑或删除已创建的事件。您可以为事件分配颜色，如果事件名称过长，可以通过长按事件查看完整的名称和描述。

功能

GIFs

截图

开始使用

在您的Flutter项目中添加插件：

flutter pub add time_scheduler_made

使用方法

首先，定义一个 TextEditingController 用于事件添加和更新提示框：

TextEditingController textController = TextEditingController();

然后，创建一个包含事件模型的列表，每个事件模型包括标题、列索引、行索引和颜色。列索引和行索引分别表示列标题（如星期一）和行标题（如08:00）的索引，它们从0开始：

List<EventModel> eventList = [
  EventModel(
    title: "Math",
    columnIndex: 0, // 列索引（星期一：0）
    rowIndex: 2, // 行索引（08:00：0）
    color: Colors.orange,
  ),
  EventModel(
    title: "History",
    columnIndex: 1,
    rowIndex: 5,
    color: Colors.pink,
  ),
  EventModel(
    title: "Guitar & Piano Course",
    columnIndex: 4,
    rowIndex: 8,
    color: Colors.green,
  ),
  EventModel(
    title: "Meeting",
    columnIndex: 3,
    rowIndex: 1,
    color: Colors.deepPurple,
  ),
  EventModel(
    title: "Guitar and Piano Course",
    columnIndex: 2,
    rowIndex: 9,
    color: Colors.blue,
  )
];

接下来，创建您的时间调度表：

TimeSchedulerTable(
  cellHeight: 64,
  cellWidth: 72,
  columnTitles: const [ // 您可以为列标题指定任何值。例如：['Column 1','Column 2','Column 3', ...]
    "Mon",
    "Tue",
    "Wed",
    "Thur",
    "Fri",
    "Sat",
    "Sun"
  ],
  currentColumnTitleIndex: DateTime.now().weekday - 1, // 当前选中的列索引
  rowTitles: const [ // 您可以为行标题指定任何值。例如：['Row 1','Row 2','Row 3', ...]
    '08:00 - 09:00',
    '09:00 - 10:00',
    '10:00 - 11:00',
    '11:00 - 12:00',
    '12:00 - 13:00',
    '13:00 - 14:00',
    '14:00 - 15:00',
    '15:00 - 16:00',
    '16:00 - 17:00',
    '17:00 - 18:00',
    '18:00 - 19:00',
    '19:00 - 20:00',
    '20:00 - 21:00',
  ],
  title: "Event Schedule",
  titleStyle: const TextStyle(
      fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black),
  eventTitleStyle: const TextStyle(color: Colors.white, fontSize: 8),
  isBack: false, // 返回按钮
  eventList: eventList,
  eventAlert: EventAlert(
    alertTextController: textController,
    borderRadius: const BorderRadius.all(
      Radius.circular(12.0),
    ),
    addAlertTitle: "Add Event",
    editAlertTitle: "Edit",
    addButtonTitle: "ADD",
    deleteButtonTitle: "DELETE",
    updateButtonTitle: "UPDATE",
    hintText: "Event Name",
    textFieldEmptyValidateMessage: "Cannot be empty!",
    addOnPressed: (event) { // 当事件添加到列表时
      // 在这里编写您的代码
    },
    updateOnPressed: (event) { // 当事件从列表中更新时
      // 在这里编写您的代码
    }, 
    deleteOnPressed: (event) { // 当事件从列表中删除时
      // 在这里编写您的代码
    }, 
  ),
),

参数说明

  • columnTitles: 包含列标题的列表，默认值为 ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"]。
  • currentColumnTitleIndex: 当前选中的列索引，默认值为当前日期的星期几减一。
  • rowTitles: 包含行标题的列表，默认值为时间范围。
  • title: 时间表的标题。
  • titleStyle: 标题样式。
  • eventTitleStyle: 事件标题样式。
  • isBack: 是否显示返回按钮。
  • eventList: 事件列表。
  • eventAlert: 事件提示框配置。

完整示例代码

以下是一个完整的示例代码：

import 'package:time_scheduler_made/time_scheduler_made.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky,
        overlays: [SystemUiOverlay.bottom]);

    TextEditingController textController = TextEditingController();

    List<EventModel> eventList = [
      EventModel(
        title: "Math",
        columnIndex: 0, // 列索引（星期一：0）
        rowIndex: 2, // 行索引（08:00：0）
        color: Colors.orange,
      ),
      EventModel(
        title: "History",
        columnIndex: 1,
        rowIndex: 5,
        color: Colors.pink,
      ),
      EventModel(
        title: "Guitar & Piano Course",
        columnIndex: 4,
        rowIndex: 8,
        color: Colors.green,
      ),
      EventModel(
        title: "Meeting",
        columnIndex: 3,
        rowIndex: 1,
        color: Colors.deepPurple,
      ),
      EventModel(
        title: "Guitar and Piano Course",
        columnIndex: 2,
        rowIndex: 9,
        color: Colors.blue,
      )
    ];

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
        useMaterial3: false,
      ),
      home: TimeSchedulerTable(
        cellHeight: 72,
        cellWidth: 72,
        columnTitles: const [
          "Mon",
          "Tue",
          "Wed",
          "Thur",
          "Fri",
          "Sat",
          "Sun"
        ],
        currentColumnTitleIndex: DateTime.now().weekday - 1,
        rowTitles: const [
          '08:00 - 09:00',
          '09:00 - 10:00',
          '10:00 - 11:00',
          '11:00 - 12:00',
          '12:00 - 13:00',
          '13:00 - 14:00',
          '14:00 - 15:00',
          '15:00 - 16:00',
          '16:00 - 17:00',
          '17:00 - 18:00',
          '18:00 - 19:00',
          '19:00 - 20:00',
          '20:00 - 21:00',
        ],
        title: "Event Schedule",
        titleStyle: const TextStyle(
            fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black),
        eventTitleStyle: const TextStyle(color: Colors.white, fontSize: 8),
        isBack: false, // 返回按钮
        eventList: eventList,
        scrollColor: Colors.deepOrange.withOpacity(0.7),
        isScrollTrackingVisible: true,
        eventAlert: EventAlert(
          alertTextController: textController,
          borderRadius: const BorderRadius.all(
            Radius.circular(12.0),
          ),
          addAlertTitle: "Add Event",
          editAlertTitle: "Edit",
          addButtonTitle: "ADD",
          deleteButtonTitle: "DELETE",
          updateButtonTitle: "UPDATE",
          hintText: "Event Name",
          textFieldEmptyValidateMessage: "Cannot be empty!",
          addOnPressed: (event) {}, // 当事件添加到列表时
          updateOnPressed: (event) {}, // 当事件从列表中更新时
          deleteOnPressed: (event) {}, // 当事件从列表中删除时
        ),
      ),
    );
  }
}

更多关于Flutter时间调度插件time_scheduler_made的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter时间调度插件time_scheduler_made的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


time_scheduler_made 是一个用于 Flutter 的时间调度插件，它可以帮助你在应用中创建和管理时间表。以下是如何使用 time_scheduler_made 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 time_scheduler_made 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  time_scheduler_made: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 time_scheduler_made 插件：

import 'package:time_scheduler_made/time_scheduler_made.dart';

3. 使用 TimeScheduler 组件

TimeScheduler 是 time_scheduler_made 插件中的主要组件，你可以使用它来创建和管理时间表。

以下是一个简单的示例，展示如何使用 TimeScheduler：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Time Scheduler Example'),
        ),
        body: TimeScheduler(
          onTimeSelected: (selectedTime) {
            print('Selected Time: $selectedTime');
          },
          initialTime: TimeOfDay(hour: 9, minute: 0),
          interval: 30,
          startHour: 8,
          endHour: 20,
        ),
      ),
    );
  }
}

4. 参数说明

  • onTimeSelected: 当用户选择一个时间时触发的回调函数，返回一个 TimeOfDay 对象。
  • initialTime: 初始显示的时间，默认为 TimeOfDay(hour: 9, minute: 0)。
  • interval: 时间间隔（以分钟为单位），默认为 30 分钟。
  • startHour: 时间表的开始小时，默认为 8。
  • endHour: 时间表的结束小时，默认为 20。

5. 自定义样式

你可以通过传递 decoration 参数来自定义 TimeScheduler 的外观。例如：

TimeScheduler(
  onTimeSelected: (selectedTime) {
    print('Selected Time: $selectedTime');
  },
  initialTime: TimeOfDay(hour: 9, minute: 0),
  interval: 30,
  startHour: 8,
  endHour: 20,
  decoration: TimeSchedulerDecoration(
    backgroundColor: Colors.white,
    selectedColor: Colors.blue,
    unselectedColor: Colors.grey,
    textStyle: TextStyle(color: Colors.black, fontSize: 16),
  ),
)

6. 处理用户选择的时间

在 onTimeSelected 回调中，你可以处理用户选择的时间。例如，你可以将选择的时间显示在屏幕上或保存到数据库中。

onTimeSelected: (selectedTime) {
  print('Selected Time: $selectedTime');
  // 你可以在这里处理选择的时间
},
回到顶部