Flutter日期范围选择插件booking_range_slider的使用

一个用于在Flutter应用中轻松选择预订或预约时间范围的插件。

版本尚未达到1.0.0。可能存在bug或者引入破坏性更改。

使用方法

以下是一个简单的使用示例：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _do(BookingValues value) {
    // 处理选中的值
    print('Selected value: $value');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期范围选择器示例'),
      ),
      body: Center(
        child: Container(
          width: 300,
          child: BookingRangeSlider(
            onChanged: (value) {
              _do(value);
            },
            displayHandles: true,
            labelFrequency: TimeOfDay(hour: 1, minute: 0),
            initialTime: TimeOfDay(hour: 0, minute: 0),
            endingTime: TimeOfDay(hour: 6, minute: 0),
            values: [
              BookingValues(
                TimeOfDay(hour: 1, minute: 0),
                TimeOfDay(hour: 2, minute: 0),
              ),
              BookingValues(
                TimeOfDay(hour: 3, minute: 0),
                TimeOfDay(hour: 3, minute: 30),
              ),
              BookingValues(
                TimeOfDay(hour: 4, minute: 0),
                TimeOfDay(hour: 5, minute: 0),
                isAvailable: true,
              ),
              BookingValues(
                TimeOfDay(hour: 5, minute: 30),
                TimeOfDay(hour: 6, minute: 0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

属性

/// 显示不可用/已预订范围的颜色。
/// 默认为红色。
final Color unavailableColor;

/// 显示可用/空闲范围的颜色。
/// 默认为绿色。
final Color availableColor;

/// 显示当前选中范围的颜色。
/// 默认为橙色。
final Color selectedColor;

/// 是否在选中的[BookingValues]范围边界处显示手柄。
/// 默认为true。
final bool displayHandles;

/// 是否在[BookingRangeSlider]滑块顶部显示标签。
/// 默认为true。
final bool displayLabels;

/// 是否高亮当前选中的[BookingValues]范围。
/// 默认为true。
final bool highlightSelected;

/// 标签在[BookingRangeSlider]滑块上方出现的频率。
/// 默认为每4小时一次。
final TimeOfDay labelFrequency;

/// 标签的样式。
final TextStyle labelStyle;

/// [BookingRangeSlider]左侧边界的初始/起始边界。
/// 默认为0时0分。
///
/// 如果[initialTime]和[endingTime]的`小时`和`分钟`都为0，则[BookingRangeSlider]的范围为24小时。
///
/// 初始时间必须不晚于[endingTime]。
final TimeOfDay initialTime;

/// [BookingRangeSlider]左侧边界的结束/最终边界。
/// 默认为0时0分。
///
/// 如果[initialTime]和[endingTime]的`小时`和`分钟`都为0，则[BookingRangeSlider]的范围为24小时。
///
/// 结束时间必须晚于[initialTime]。
final TimeOfDay endingTime;

/// 每次拖动手柄时可以迭代的时间[TimeOfDay]值。
/// 默认为30分钟。
///
/// 例如 - 每次拖动手柄将增加/减少当前[TimeOfDay]值2小时：
/// ```
/// division: TimeOfDay(hour: 2, minute: 0),
/// ```
///
final TimeOfDay division;

/// 当手柄位置变化时触发。
final ValueChanged<BookingValues>? onChanged;

/// 填充[BookingRangeSlider]的[BookingValues]列表，通过[BookingValues]的`isAvailable`属性。
/// 不需要填充每一个范围 - 未填充的部分将默认用绿色[BookingValues]值填充。
///
/// [BookingValues]不能重叠！
final List<BookingValues> values;