flutter_xlider

现已支持 null safety。

(Flutter 滑块) 一个 Material Design 滑块和范围滑块，支持横向和纵向，支持 RTL，以及大量 Flutter 的选项和自定义功能。

!! 自 3.4.0-dev.3 版本起，step 类型不再是 double，而是 FlutterSliderStep !!

开始使用

单滑块

一个单滑块

FlutterSlider(
  values: [300],
  max: 500,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
)

要使滑块 从右到左，请使用 rtl: true

 FlutterSlider(
  ...
  rtl: true,
  ...
)

范围滑块

范围滑块的简单示例

FlutterSlider(
  values: [30, 420],
  rangeSlider: true,
  max: 500,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
)

垂直轴

您可以通过将 axis 设置为 Axis.vertical 来更改滑块的轴。默认为水平。

FlutterSlider(
  ...
  axis: Axis.vertical,
  ...
)

处理器

您可以使用 handler 和 rightHandler 属性自定义滑块句柄。handler 和 rightHandler 都接受 FlutterSliderHandler 类，该类具有以下属性：

  1. child：一个 widget
  2. disabled：禁用句柄
  3. decoration、foregroundDecoration 和 transform 来自 Container() widget

FlutterSlider(
  ...
  handler: FlutterSliderHandler(
    decoration: BoxDecoration(),
    child: Material(
      type: MaterialType.canvas,
      color: Colors.orange,
      elevation: 3,
      child: Container(
          padding: EdgeInsets.all(5),
          child: Icon(Icons.adjust, size: 25,)),
    ),
  ),
  rightHandler: FlutterSliderHandler(
    child: Icon(Icons.chevron_left, color: Colors.red, size: 24,),
  ),
  ...
)

句柄缩放动画

您可以使用 handlerAnimation 来控制滑块句柄的缩放动画类型、持续时间和缩放大小。handlerAnimation 接受 FlutterSliderHandlerAnimation 类，该类具有以下 4 个属性：

FlutterSlider(
  ...
    handlerAnimation: FlutterSliderHandlerAnimation(
      curve: Curves.elasticOut,
      reverseCurve: Curves.bounceIn,
      duration: Duration(milliseconds: 500),
      scale: 1.5
    ),
  ...
)

如果您不想要缩放动画，则只需将 scale 属性设置为 1 如果您不想要 reverseCurve，只需忽略它。默认为 null。

轨道条

要自定义轨道条，您可以使用 FlutterSliderTrackBar。 您可以在此处查看详细信息

FlutterSlider(
  ...
    trackBar: FlutterSliderTrackBar(
      activeTrackBarHeight: 5,
    ),
  ...
)

inactiveTrackBarColor 和 activeTrackBarColor 属性已被移除。请改用 inactiveTrackBar 和 activeTrackBar。

FlutterSlider(
  ...
    trackBar: FlutterSliderTrackBar(
      inactiveTrackBar: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.black12,
        border: Border.all(width: 3, color: Colors.blue),
      ),
      activeTrackBar: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        color: Colors.blue.withOpacity(0.5)
      ),
    ),
  ...
)

中心 Widget

如果您想在滑块的中间放置一个 widget，您可以使用 centralWidget。

FlutterSlider(
  ...
    trackBar: FlutterSliderTrackBar(
        centralWidget: Container(
          decoration: BoxDecoration(
              color: trackBarColor,
            borderRadius: BorderRadius.circular(50)
          ),
          width: 9,
          height: 9,
        ),
    ),
  ...
)

工具提示

为了自定义您的工具提示，您可以使用 FlutterSliderTooltip 类。 您可以在此处查看所有属性

FlutterSlider(
  ...
  tooltip: FlutterSliderTooltip(
    textStyle: TextStyle(fontSize: 17, color: Colors.white),
    boxStyle: FlutterSliderTooltipBox(
      decoration: BoxDecoration(
        color: Colors.redAccent.withOpacity(0.7)
      )
    )
  ),
  ...
)

这是一个带有自定义句柄、轨道条和工具提示的范围滑块。

工具提示前缀

您可以使用 leftPrefix、leftSuffix、rightPrefix、rightSuffix 在工具提示内容周围添加所需的 widget。

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      leftPrefix: Icon(Icons.attach_money, size: 19, color: Colors.black45,),
      rightSuffix: Icon(Icons.attach_money, size: 19, color: Colors.black45,),
    ),
  ...
)

工具提示格式

如果您想更改工具提示值的格式，您可以使用 format 方法。

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      format: (String value) {
        return value + ' ! ';
      }
    ),
  ...
)

工具提示回调

如果您想完全更改工具提示 widget 并使用自己的自定义 widget，您可以使用 custom 函数。

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      custom: (value) {
        return Text(value.toString());
      }
    ),
  ...
)

禁用工具提示

要禁用工具提示，请在 FlutterSliderTooltip 类中使用 disabled。

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      disabled: true,
    ),
  ...
)

工具提示方向

要更改工具提示的方向，您可以使用 direction。

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      direction: FlutterSliderTooltipDirection.right,
    ),
  ...
)

工具提示位置偏移

默认情况下，工具提示对齐方式是居中，但您可以使用 positionOffset 修改其 top、left、right 和 bottom。

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      positionOffset: FlutterSliderTooltipPositionOffset(
        top: -100
      ),
    ),
  ...
)

始终显示工具提示

如果此属性设置为 true，则工具提示将始终显示。

FlutterSlider(
  ...
  tooltip: FlutterSliderTooltip(
    alwaysShowTooltip: true,
  ),
  ...
)

控件

句柄宽度和高度

默认情况下，两个句柄的大小均为 35 像素宽和高，但您可以通过 handlerWidth 和 handlerHeight 进行更改。

FlutterSlider(
  ...
  handlerWidth: 30,
  handlerHeight: 30,
  ...
)

通过点击选择

您可以通过点击滑块来选择其值。如果滑块是范围滑块，则离选定点最近的句柄将移动到该点。

FlutterSlider(
  ...
  selectByTap: true, // default is true
  ...
)

如果您想通过触摸和移动活动轨道条来移动句柄，您需要将此设置为 false。

跳跃

默认情况下，滑块句柄会流畅移动。如果将 jump 设置为 true，句柄将在间隔之间跳转。

FlutterSlider(
  ...
  jump: true,
  ...
)

步骤

滑块移动时更改的数量可以通过 step 选项设置。

FlutterSlider(
  ...
  step: FlutterSliderStep(step: 1),
  ...
)

范围步长

如果您想拥有一个具有不同步长的非线性滑块，只需使用 rangeStep 功能。

FlutterSlider(
  min: 0,
  max: 1000000,
  ...
  step: FlutterSliderStep(
    step: 1, // default
    isPercentRange: true, // ranges are percents, 0% to 20% and so on... . default is true
    rangeList: [
      FlutterSliderRangeStep(from: 0, to: 20, step: 10000),
      FlutterSliderRangeStep(from: 20, to: 100, step: 200000),
    ]
  ),
  ...
)

忽略步长

如果您的配置需要某些步长不可用，您可以使用 ignoreSteps 属性。此属性接受一个简单的类来定义 from 和 to 范围。

FlutterSlider(
  ...
    ignoreSteps: [
      FlutterSliderIgnoreSteps(from: 8000, to: 12000),
      FlutterSliderIgnoreSteps(from: 18000, to: 22000),
    ],
  ...
)

固定值

如果您想拥有一系列固定项并在其中滑动，您可以使用 fixedValues 属性。使用 FlutterSliderFixedValue 添加您的固定值。FlutterSliderFixedValue 具有以下属性：

  1. percent：(int) (包含 0..100)。固定项的位置。
  2. value：(dynamic) 固定项的值。
  • 使用 fixedValues 时，values 属性的值必须在 0..100 之间。

FlutterSlider(
  ...
    values: [ 10, 50 ],
    fixedValues: [
      FlutterSliderFixedValue(percent: 0, value: "1000"),
      FlutterSliderFixedValue(percent: 10, value: "10K"),
      FlutterSliderFixedValue(percent: 50, value: 50000),
      FlutterSliderFixedValue(percent: 80, value: "80M"),
      FlutterSliderFixedValue(percent: 100, value: "100B"),
    ],
  ...
)

使用上面的示例，当您到达滑块的 10% 时，您会得到 (string) 10K 作为 upperValue 或 lowerValue（取决于句柄），当您到达滑块的 50% 时，您会得到 (int) 50000，依此类推。

使用 fixedValues 时，将忽略 min 和 max。

最小距离

使用范围滑块时，可以使用 minimumDistance 选项定义两个句柄之间的最小距离。

FlutterSlider(
  ...
    minimumDistance: 300,
  ...
)

最大距离

这与最小距离相反。使用范围滑块时，可以使用 maximumDistance 选项定义两个句柄之间的最大距离。

FlutterSlider(
  ...
    maximumDistance: 300,
  ...
)

锁定句柄

如果您想将句柄锁定在某个特定值，您可以使用 lockHandlers 和 lockDistance 属性。

FlutterSlider(
  ...
    lockHandlers: true,
    lockDistance: 50,
  ...
)

刻度标记

您可以根据 axis 在滑块下方或旁边显示 刻度标记。为了显示刻度标记，您必须使用 FlutterSliderHatchMark 类，该类具有以下属性：

  1. linesDistanceFromTrackBar：线条与滑块的距离。可以是负数。

  2. bigLine：刻度标记中大线条的 widget。

  3. smallLine：刻度标记中小线条的 widget。

  4. linesAlignment：线条的方向，right 或 left，在横向滑块上分别充当 top 或 bottom。

  5. density：每百分比的线条数量。默认为 1。任何小于或大于 1 的数字将分别减少和增加线条。

  6. displayLines：显示线条。默认值为 false，以优化性能。

  7. labels：如果您想在刻度标记的特定百分比处显示一些标签或文本，您可以使用 labels。

  8. labelBox：标签框的 widget，但是，您可以为每个标签定义一个 widget 并为其设置自己的样式。

  9. labelsDistanceFromTrackBar：标签与滑块的距离。可以是负数。

  10. disabled：禁用整个刻度标记（隐藏）。

标签对齐方式为居中。

这是一个示例。

FlutterSlider(
  ...
    hatchMark: FlutterSliderHatchMark(
       density: 0.5, // means 50 lines, from 0 to 100 percent
       labels: [
         FlutterSliderHatchMarkLabel(percent: 0, label: Text('Start')),
         FlutterSliderHatchMarkLabel(percent: 10, label: Text('10,000')),
         FlutterSliderHatchMarkLabel(percent: 50, label: Text('50 %')),
         FlutterSliderHatchMarkLabel(percent: 80, label: Text('80,000')),
         FlutterSliderHatchMarkLabel(percent: 100, label: Text('Finish')),
       ],
     ),
  ...
)

居中原点

如果您想让滑块的值从滑块的中心开始，那么您可以使用 centeredOrigin 属性。

FlutterSlider(
  ...
    centeredOrigin: true
  ...
  
  ...
    trackBar: FlutterSliderTrackBar(
      activeTrackBar: BoxDecoration(color: trackBarColor)
    ),
  ...
  
  ...
    onDragging: (handlerIndex, lowerValue, upperValue) {
        if (lowerValue > (max - min) / 2) {
          trackBarColor = Colors.blueAccent;
        } else {
          trackBarColor = Colors.redAccent;
        }
        setState(() {});
    })
  ...
)

触摸区域大小

您可以控制句柄的触摸区域有多大。默认触摸区域为 25。范围在 5 到 50 之间。

FlutterSlider(
  ...
  touchSize: 25,
  ...
)

要查看句柄的可触摸区域，请将 visibleTouchArea 设置为 true 并测试您的滑块。

FlutterSlider(
  ...
  visibleTouchArea: true,
  ...
)

禁用

要禁用您的滑块，您可以使用 disabled。

FlutterSlider(
  ...
  disabled: true,
  ...
)

RTL

使滑块 从右到左。

FlutterSlider(
  ...
  rtl: true,
  ...
)

事件

有 3 个事件：

onDragStarted：拖动开始时触发。onDragCompleted 拖动结束时触发。onDragging 拖动时持续触发。

以上三个函数都返回三个值。

(int handlerIndex, dynamic lowerValue, dynamic upperValue)

第一个值是 handlerIndex，它决定了句柄。0 是 左句柄，1 指的是 右句柄。

FlutterSlider(
  ...
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    
    if(handlerIndex == 0)
        print(" Left handler ");
    
    setState(() {});
  },
  ...
)

处理日期

处理日期非常简单明了。只需像这样传递标准的 unix 时间戳作为值。

FlutterSlider(
  ...
  values: [
    new DateTime(2019,6,1,0,0,0).millisecondsSinceEpoch.toDouble(), // lower date : 2019-06-01
    new DateTime(2019,9,1,0,0,0).millisecondsSinceEpoch.toDouble(), // upper date : 2019-09-01
  ],
  min: new DateTime(2019,1,1,0,0,0).millisecondsSinceEpoch.toDouble(), // start date : 2019-01-01
  max: new DateTime(2020,1,1,0,0,0).millisecondsSinceEpoch.toDouble(), // finish date : 2020-01-01
  step: FlutterSliderStep(step: 86400), // 1 day
  ...

  ...
  tooltip: FlutterSliderTooltip(
    custom: (value) {
      DateTime dtValue = DateTime.fromMillisecondsSinceEpoch(value.toInt());
      String valueInTime = dtValue.year.toString() + '-' + dtValue.month.toString() + '-' + dtValue.day.toString();
      
      return Text( valueInTime );
    }
  )
  ...

)

展示

我们很乐意看到您使用此软件包构建的成果。打开 wiki 标签页，创建一个页面，与我们分享您的代码和滑块的图片。谢谢！

以下是您可以使用此软件包构建的一些示例。

Alphabet Range Waves Dirty Dial Alone in the Dark

您可以在 wiki 标签页中找到源代码。

GitHub

查看 Github