Flutter滑动组件插件flutter_fluid_slider的使用

Flutter滑动组件插件flutter_fluid_slider的使用

flutter_fluid_slider 是一个灵感来源于 Dribbble 上 Virgil Pana 的设计的滑动组件。它是一个具有流体动画效果的滑块组件，可以像 Material Design 的 Slider 组件一样使用。

安装

在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_fluid_slider: ^1.0.2

然后运行 flutter pub get 来安装该包。

基本用法

在你的 Widget 树中插入 FluidSlider 组件。

FluidSlider(
  value: _value, // 当前选中的值
  onChanged: (double newValue) { // 滑块值改变时的回调
    setState(() {
      _value = newValue;
    });
  },
  min: 0.0, // 最小值
  max: 100.0, // 最大值
),

属性说明

以下是 FluidSlider 的主要属性及其描述：

必填属性

• value: 当前选中的值，滑块的拇指会根据此值绘制。
• onChanged: 在用户拖动滑块时调用，传递新的值。

可选属性

• min: 用户可选择的最小值，默认为 0.0。必须小于或等于 max。
• max: 用户可选择的最大值，默认为 1.0。必须大于或等于 min。
• start: 显示在滑块最小值位置的 Widget，默认显示 min 的文本。
• end: 显示在滑块最大值位置的 Widget，默认显示 max 的文本。
• onChangeStart: 用户开始拖动滑块时调用，传递旧值。
• onChangeEnd: 用户结束拖动滑块时调用。
• labelsTextStyle: 滑块上显示的最小值和最大值文本样式。如果未提供，则应用祖先主题的 accentTextTheme。
• valueTextStyle: 滑块上显示的当前值文本样式。如果未提供，则应用祖先主题的 textTheme.title 并设置为加粗。
• sliderColor: 滑块的颜色。如果未提供，则应用祖先主题的 primaryColor。
• thumbColor: 滑块拇指的颜色。如果未提供，则默认为 Colors.white。
• thumbDiameter: 滑块拇指的直径，默认为 60.0。
• showDecimalValue: 是否显示滑块值的小数部分，默认为 false。
• mapValueToString: 将滑块值映射为字符串。例如，将数字转换为罗马数字：

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];
  },
)

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_fluid_slider 插件。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  HomePageState createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  double _value1 = 0.0; // 第一个滑块的值
  double _value2 = 10.0; // 第二个滑块的值
  double _value3 = 1.0; // 第三个滑块的值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            // 第一个滑块
            FluidSlider(
              value: _value1,
              onChanged: (double newValue) {
                setState(() {
                  _value1 = newValue;
                });
              },
              min: 0.0,
              max: 100.0,
            ),
            SizedBox(height: 100.0), // 空白间距

            // 第二个滑块，自定义颜色和图标
            FluidSlider(
              value: _value2,
              onChanged: (double newValue) {
                setState(() {
                  _value2 = newValue;
                });
              },
              min: 0.0,
              max: 500.0,
              sliderColor: Colors.redAccent, // 滑块颜色
              thumbColor: Colors.amber, // 拇指颜色
              start: Icon(Icons.money_off, color: Colors.white), // 最小值图标
              end: Icon(Icons.attach_money, color: Colors.white), // 最大值图标
            ),
            SizedBox(height: 100.0),

            // 第三个滑块，使用罗马数字映射
            FluidSlider(
              value: _value3,
              sliderColor: Colors.purple,
              onChanged: (double newValue) {
                setState(() {
                  _value3 = newValue;
                });
              },
              min: 1.0,
              max: 5.0,
              mapValueToString: (double value) {
                List<String> romanNumerals = ['I', 'II', 'III', 'IV', 'V'];
                return romanNumerals[value.toInt() - 1];
              },
            ),
          ],
        ),
      ),
    );
  }
}