Flutter事件预订时间线管理插件event_booking_timeline的使用

Flutter事件预订时间线管理插件event_booking_timeline的使用

介绍

event_booking_timeline 是一个用于显示特定时间段内已预订事件的时间线小部件。该插件可以帮助用户更直观地查看和选择可用的时间段，同时避免选择已被预订的时间段。

特性

• 时间线颜色根据预订状态变化：可用时间段和已预订时间段会显示不同的颜色。
• 支持24小时和12小时格式：可以根据需求选择显示的时间格式。
• 时间更改回调：当用户选择某个时间段时，可以触发回调函数。
• 内置数据类：提供了内置的 Booking 类来管理预订数据。
• 自定义回调和异常处理：支持自定义回调函数和异常处理。
• 高亮当前选中的时间段：可以选择高亮显示当前选中的时间段，并且可以配置持续时间。
• 跳过被阻止的时间段：当用户尝试选择被阻止的时间段时，时间线会自动跳转到下一个或上一个可用时间段。

即将推出的功能

• 滚动时的可选触觉反馈：在用户滚动时间线时提供触觉反馈。
• 缩放时间线功能：可以通过缩放来调整时间线的分段数量，以便更精确地选择时间。
• 更多配置选项：提供更多自定义配置选项。
• 更多回调函数：增加更多的回调函数以满足不同需求。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
    event_booking_timeline: ^0.1.0

使用方法

简单的时间线示例

以下是一个简单的 EventBookingTimeline 示例，展示了如何创建一个带有预订时间段的时间线：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String text = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.grey[200],
          height: 400,
          width: 400,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 25, width: 200),
              SizedBox(height: 50, width: 200, child: Text("Selected Time: $text")),
              const Icon(Icons.arrow_drop_down, size: 30),
              // 时间线示例
              Expanded(
                child: EventBookingTimeline(
                  booked: [
                    Booking(startTime: "00:00", endTime: "01:00"),
                    Booking(startTime: "01:00", endTime: "02:00"),
                    Booking(startTime: "08:00", endTime: "09:00"),
                  ],
                  startTime: "00:00",
                  endTime: "24:00",
                  is12HourFormat: true,
                  moveToFirstAvailableTime: false,
                  numberOfSubdivision: 5,
                  widthOfSegment: 100,
                  widthOfTimeDivisionBar: 3,
                  availableColor: Colors.green,
                  bookedColor: Colors.red,
                  moveToNextPrevSlot: true,
                  durationToBlock: 1,
                  blockUntilCurrentTime: true,
                  barColor: Colors.black,
                  selectedBarColor: Colors.white,
                  selectedTextColor: Colors.white,
                  textColor: Colors.black,
                  addBuffer: true,
                  onError: (error) {
                    log("Error: $error");
                  },
                  onTimeSelected: (String time) {
                    setState(() {
                      text = time;
                    });
                  },
                  onTimeLineEnd: () {
                    log("TimeLine Ended");
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

带有当前预订时间段的时间线示例

以下是一个带有当前预订时间段的时间线示例，展示了如何高亮显示当前选中的时间段：

Expanded(
  child: EventBookingTimeline.withCurrentBookingSlot(
    booked: [
      Booking(startTime: "00:00", endTime: "01:00"),
      Booking(startTime: "01:00", endTime: "02:00"),
      Booking(startTime: "08:00", endTime: "09:00"),
    ],
    startTime: "00:00",
    endTime: "24:00",
    is12HourFormat: true,
    moveToFirstAvailableTime: false,
    numberOfSubdivision: 5,
    widthOfSegment: 100,
    widthOfTimeDivisionBar: 3,
    availableColor: Colors.green,
    bookedColor: Colors.red,
    moveToNextPrevSlot: true,
    durationToBlock: 1,
    showCurrentBlockedSlot: true,
    currentBlockedColor: Colors.blue,
    blockUntilCurrentTime: true,
    barColor: Colors.black,
    selectedBarColor: Colors.white,
    selectedTextColor: Colors.white,
    textColor: Colors.black,
    addBuffer: false,
    onError: (error) {
      log("Error: $error");
    },
    onTimeSelected: (String time) {
      setState(() {
        text = time;
      });
    },
    onTimeLineEnd: () {
      log("TimeLine Ended");
    },
  ),
)