Flutter 流体滑块


Awesome Flutter

灵感来自 Virgil Pana 的 dribbble 设计。

demo

一个流体设计的滑块，其工作方式与 Slider material widget 相同。

用于从一系列值中进行选择。

安装

只需将该包添加到 `pubspec.yaml` 文件中的依赖项中

dependencies:
  flutter_fluid_slider: ^1.0.2

基本用法

将 `FluidSlider` 放在您的 widget 树中。

FluidSlider(
  value: _value,
  onChanged: (double newValue) {
    setState(() {
      _value = newValue;
    });
  },
  min: 0.0,
  max: 100.0,
),

属性

  • value : [必需] 此滑块的当前选定值。滑块的滑块头会绘制在与此值对应的位置。

  • min : 用户可以选择的最小值。默认为 `0.0`。必须小于或等于 `max`。

  • max : 用户可以选择的最大值。默认为 `1.0`。必须小于或等于 `min`。

  • start : 将显示为最小标签的小部件。例如：可以显示一个图标。如果未提供，则 `min` 值将显示为文本。

  • end : 将显示为最大标签的小部件。例如：可以显示一个图标。如果未提供，则 `max` 值将显示为文本。

  • onChanged : [必需] 在拖动过程中调用，当用户选择滑块的新值时

    通过拖动。

    • 滑块会将新值传递给回调，但直到父 widget 用新值重建滑块之前，状态才真正发生更改。

    • 如果为 null，滑块将显示为禁用状态。

  • onChangeStart : 当用户开始为滑块选择新值时调用。传递的值将是滑块在更改开始之前的最后一个 `value`。

  • onChangeEnd : 当用户完成为滑块选择新值时调用。

  • labelsTextStyle : 显示在滑块上的最小和最大文本的样式。如果未提供，将应用祖先 `Theme` 的 `accentTextTheme` 文本样式。

  • valueTextStyle : 显示在滑块上的当前值文本的样式。如果未提供，将应用祖先 `Theme` 的 `textTheme.title` 文本样式，并加粗。

  • sliderColor : 滑块的颜色。如果未提供，将应用祖先 `Theme` 的 `primaryColor`。

  • thumbColor : 滑块头的颜色。如果未提供，将应用 `Colors.white`。

  • showDecimalValue : 是否显示滑块值的第一个小数位。默认为 `false`。

  • mapValueToString : 使用值调用，以将 String 渲染到滑块的滑块头中。例如，如下显示罗马数字

    FluidSlider(
  value:_val,
  min:1.0,
  max:5.0,
  onChanged:(){},
  mapValueToString: (double value){
    List<String> romanNumerals=['I', 'II', 'III', 'IV', 'V'];
    return _romanNumerals[value.toInt() - 1];
  }
)

    请参阅 示例。如果为 null，则根据 `showDecimalValue` 将值转换为 String。

鸣谢

GitHub

查看 Github