Flutter预订服务插件flutter_booking的使用

预订日历

想要在你的应用中实现在线预订功能吗？那么你无需再寻找其他解决方案了！

仅需四行代码，你就可以获得一个实时跟踪预订情况的在线预订系统。它会计算日历中可能发生的冲突，并以不同的颜色展示这些冲突。

你可以通过多种可选参数自定义你的预订日历。

使用方法

更多详细信息可以查看示例代码：

 Widget build(BuildContext context) {
    return BookingCalendar(
        key: key,
        /// 这些是必需的参数
        getBookingStream: getBookingStream,
        uploadBooking: uploadBooking,
        convertStreamResultToDateTimeRanges: convertStreamResultToDateTimeRanges,
        /// 这些是可选的自定义参数
        bookingButtonColor: bookingButtonColor,
        bookingButtonText: bookingButtonText,
        bookingExplanation: bookingExplanation,
        bookingGridChildAspectRatio: bookingGridChildAspectRatio,
        bookingGridCrossAxisCount: bookingGridCrossAxisCount,
        formatDateTime: formatDateTime,
        convertStreamResultToDateTimeRanges:
        convertStreamResultToDateTimeRanges,
        availableSlotColor: availableSlotColor,
        availableSlotText: availableSlotText,
        bookedSlotColor: bookedSlotColor,
        bookedSlotText: bookedSlotText,
        selectedSlotColor: selectedSlotColor,
        selectedSlotText: selectedSlotText,
        gridScrollPhysics: gridScrollPhysics,
        loadingWidget: loadingWidget,
        errorWidget: errorWidget,
        uploadingWidget: uploadingWidget,
        pauseSlotColor: pauseSlotColor,
        pauseSlotText: pauseSlotText,
        hideBreakTime: hideBreakTime,
        locale: locale,
        disabledDays: disabledDays,
        startingDayOfWeek: startingDayOfWeek,
    );
  }

Firebase 示例

在成功将 Firebase 集成到你的应用之后，请参考以下步骤：如何在 Flutter 中设置 Firebase

在这个例子中，我们将使用 Firebase Firestore 来预订体育场地。

存储在 Firebase 中的模型

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:json_annotation/json_annotation.dart';
import 'package:sport.bp/util/app_util.dart';
part 'sport_booking.g.dart';

@JsonSerializable(explicitToJson: true)
class SportBooking {
  /// 假设 JSON 中存在这些值。
  final String? userId;
  final String? userName;
  final String? placeId;
  final String? serviceName;
  final int? serviceDuration;
  final int? servicePrice;

  // 因为我们存储的是时间戳，所以需要一个 DateTime 的转换器
  /* static DateTime timeStampToDateTime(Timestamp timestamp) {
    return DateTime.parse(timestamp.toDate().toString());
  }

  static Timestamp dateTimeToTimeStamp(DateTime? dateTime) {
    return Timestamp.fromDate(dateTime ?? DateTime.now()); // 转换为时间戳
  }*/
  @JsonKey(fromJson: AppUtil.timeStampToDateTime, toJson: AppUtil.dateTimeToTimeStamp)
  final DateTime? bookingStart;
  @JsonKey(fromJson: AppUtil.timeStampToDateTime, toJson: AppUtil.dateTimeToTimeStamp)
  final DateTime? bookingEnd;
  final String? email;
  final String? phoneNumber;
  final String? placeAddress;

  SportBooking(
      {this.email,
      this.phoneNumber,
      this.placeAddress,
      this.bookingStart,
      this.bookingEnd,
      this.placeId,
      this.userId,
      this.userName,
      this.serviceName,
      this.serviceDuration,
      this.servicePrice});

  /// 将生成的 [_$SportBookingFromJson] 函数连接到 `fromJson` 工厂。
  factory SportBooking.fromJson(Map<String, dynamic> json) => _$SportBookingFromJson(json);

  /// 将生成的 [_$SportBookingToJson] 函数连接到 `toJson` 方法。
  Map<String, dynamic> toJson() => _$SportBookingToJson(this);
}

Firebase 中的数据结构

在 Firebase 初始化后，我们可以访问 Firestore 集合。

  CollectionReference bookings = FirebaseFirestore.instance.collection('bookings');

  /// 获取集合中的数据引用，并通过 Firestore 的 [withConverter] 序列化数据。
  CollectionReference<SportBooking> getBookingStream({required String placeId}) {
    return bookings.doc(placeId).collection('bookings').withConverter<SportBooking>(
          fromFirestore: (snapshots, _) => SportBooking.fromJson(snapshots.data()!),
          toFirestore: (snapshots, _) => snapshots.toJson(),
        );
  }

  /// 通过之前的方法从 Firestore 获取数据流
  /// 注意，这些查询过滤器适用于我的数据结构，你需要根据自己的需求调整。
  Stream<dynamic>? getBookingStreamFirebase(
    {required DateTime end, required DateTime start}) {
       return ApiRepository
                        .getBookingStream(placeId: 'YOUR_DOC_ID')
                        .where('bookingStart', isGreaterThanOrEqualTo: start)
                        .where('bookingStart', isLessThanOrEqualTo: end)
                        .snapshots(),
  }

  /// 在从 Firestore 获取数据后，我们需要将预订列表转换为 DateTimeRange 列表：
  List<DateTimeRange> convertStreamResultFirebase(
    {required dynamic streamResult}) {
    /// 这里你可以解析流结果并将其转换为 [List<DateTimeRange>]。
    /// 注意，这是动态的，因此你需要知道结果中可用的属性，在我们的例子中，[SportBooking] 有 bookingStart 和 bookingEnd 属性。
      List<DateTimeRange> converted = [];
      for (var i = 0; i < streamResult.size; i++) {
        final item = streamResult.docs[i].data();
        converted.add(DateTimeRange(start: (item.bookingStart!), end: (item.bookingEnd!)));
      }
  return converted;
}

  /// 向 Firestore 上传数据
  Future<dynamic> uploadBookingFirebase(
    {required BookingService newBooking}) async {
    await bookings
        .doc('your id, or autogenerate')
        .collection('bookings')
        .add(newBooking.toJson())
        .then((value) => print("Booking Added"))
        .catchError((error) => print("Failed to add booking: $error"));

  }

/** 在完成所有辅助函数后，你可以将它们传递给你的 BookingCalendar */
BookingCalendar(
    bookingService: mockBookingService,
    convertStreamResultToDateTimeRanges: convertStreamResultFirebase,
    getBookingStream: getBookingStreamFirebase,
    uploadBooking: uploadBookingFirebase,
    uploadingWidget: const CircularProgressIndicator(),
    // ... 其他自定义属性
),