Flutter范围选择滑块插件flutter_range_slider的使用

flutter_range_slider 是一个基于 Flutter Material Slider 的扩展插件，允许用户通过两个滑块选择一个值范围。它非常适合需要用户输入范围值的场景，例如价格区间、时间范围等。

插件效果展示

使用步骤详解

完整的插件实现细节可以参考以下链接：

英文版说明点击这里
法文版说明点击这里

开始使用

1. 添加依赖

在你的 Flutter 项目中，确保添加以下依赖：

dependencies:
  flutter_range_slider: "^1.5.0"

然后运行 flutter packages upgrade 或者在 IntelliJ 中更新包。

在 Dart 文件中引入插件：

import 'package:flutter_range_slider/flutter_range_slider.dart' as frs;

重要提示
自版本 1.7 起，Flutter 框架也提供了自己的 RangeSlider 组件。如果你想继续使用此库，需要为其添加别名（如 frs），并在使用时前缀 RangeSlider 和 RangeSliderCallback（例如 frs.RangeSlider 和 frs.RangeSliderCallback）。

示例代码

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

import 'package:flutter/material.dart';
import 'package:flutter_range_slider/flutter_range_slider.dart' as frs;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RangeSlider Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: RangeSliderSample(),
    );
  }
}

class RangeSliderSample extends StatefulWidget {
  [@override](/user/override)
  _RangeSliderSampleState createState() => _RangeSliderSampleState();
}

class _RangeSliderSampleState extends State<RangeSliderSample> {
  List<RangeSliderData> rangeSliders;
  double _lowerValue = 20.0;
  double _upperValue = 80.0;
  double _lowerValueFormatter = 20.0;
  double _upperValueFormatter = 20.0;

  [@override](/user/override)
  void initState() {
    super.initState();
    rangeSliders = _rangeSliderDefinitions();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      bottom: false,
      child: Scaffold(
        appBar: AppBar(title: Text('RangeSlider Demo')),
        body: Container(
          padding: const EdgeInsets.only(top: 50.0, left: 10.0, right: 10.0),
          child: Column(
            children: <Widget>[
              // 简单示例
              frs.RangeSlider(
                min: 0.0,
                max: 100.0,
                lowerValue: _lowerValue,
                upperValue: _upperValue,
                divisions: 5,
                showValueIndicator: true,
                valueIndicatorMaxDecimals: 1,
                onChanged: (double newLowerValue, double newUpperValue) {
                  setState(() {
                    _lowerValue = newLowerValue;
                    _upperValue = newUpperValue;
                  });
                },
                onChangeStart: (double startLowerValue, double startUpperValue) {
                  print('Started with values: $startLowerValue and $startUpperValue');
                },
                onChangeEnd: (double newLowerValue, double newUpperValue) {
                  print('Ended with values: $newLowerValue and $newUpperValue');
                },
              ),

              // 添加一些间距
              SizedBox(height: 24.0),

              // 创建一系列自定义的 RangeSliders
              ..._buildRangeSliders(),

              // 添加禁用状态的 RangeSlider
              frs.RangeSlider(
                min: 0.0,
                max: 100.0,
                lowerValue: 25.0,
                upperValue: 50.0,
                divisions: 5,
                showValueIndicator: true,
                valueIndicatorMaxDecimals: 1,
                onChanged: null,
              ),

              // 添加自定义值格式化器
              frs.RangeSlider(
                min: 0.0,
                max: 100.0,
                lowerValue: _lowerValueFormatter,
                upperValue: _upperValueFormatter,
                divisions: 10,
                showValueIndicator: true,
                valueIndicatorFormatter: (int index, double value) {
                  String twoDecimals = value.toStringAsFixed(2);
                  return '$twoDecimals mm';
                },
                onChanged: (double newLowerValue, double newUpperValue) {
                  setState(() {
                    _lowerValueFormatter = newLowerValue;
                    _upperValueFormatter = newUpperValue;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 创建一系列 RangeSliders，并根据定义进行定制
  List<Widget> _buildRangeSliders() {
    List<Widget> children = [];
    for (int index = 0; index < rangeSliders.length; index++) {
      children.add(
        rangeSliders[index].build(context, (double lower, double upper) {
          setState(() {
            rangeSliders[index].lowerValue = lower;
            rangeSliders[index].upperValue = upper;
          });
        }),
      );
      children.add(SizedBox(height: 8.0)); // 每个 RangeSlider 之间增加间距
    }
    return children;
  }

  // 定义一组 RangeSlider 参数
  List<RangeSliderData> _rangeSliderDefinitions() {
    return [
      RangeSliderData(min: 0.0, max: 100.0, lowerValue: 10.0, upperValue: 100.0),
      RangeSliderData(
        min: 0.0,
        max: 100.0,
        lowerValue: 25.0,
        upperValue: 75.0,
        divisions: 20,
        overlayColor: Colors.red[100],
      ),
      RangeSliderData(
        min: 0.0,
        max: 100.0,
        lowerValue: 10.0,
        upperValue: 30.0,
        showValueIndicator: false,
        valueIndicatorMaxDecimals: 0,
      ),
      RangeSliderData(
        min: 0.0,
        max: 100.0,
        lowerValue: 10.0,
        upperValue: 30.0,
        showValueIndicator: true,
        valueIndicatorMaxDecimals: 0,
        activeTrackColor: Colors.red,
        inactiveTrackColor: Colors.red[50],
        valueIndicatorColor: Colors.green,
      ),
      RangeSliderData(
        min: 0.0,
        max: 100.0,
        lowerValue: 25.0,
        upperValue: 75.0,
        divisions: 20,
        thumbColor: Colors.grey,
        valueIndicatorColor: Colors.grey,
      ),
    ];
  }
}

// 辅助类，用于简化 RangeSlider 的创建和参数化
class RangeSliderData {
  double min;
  double max;
  double lowerValue;
  double upperValue;
  int divisions;
  bool showValueIndicator;
  int valueIndicatorMaxDecimals;
  bool forceValueIndicator;
  Color overlayColor;
  Color activeTrackColor;
  Color inactiveTrackColor;
  Color thumbColor;
  Color valueIndicatorColor;
  Color activeTickMarkColor;

  static const Color defaultActiveTrackColor = const Color(0xFF0175c2);
  static const Color defaultInactiveTrackColor = const Color(0x3d0175c2);
  static const Color defaultActiveTickMarkColor = const Color(0x8a0175c2);
  static const Color defaultThumbColor = const Color(0xFF0175c2);
  static const Color defaultValueIndicatorColor = const Color(0xFF0175c2);
  static const Color defaultOverlayColor = const Color(0x290175c2);

  RangeSliderData({
    this.min,
    this.max,
    this.lowerValue,
    this.upperValue,
    this.divisions,
    this.showValueIndicator: true,
    this.valueIndicatorMaxDecimals: 1,
    this.forceValueIndicator: false,
    this.overlayColor: defaultOverlayColor,
    this.activeTrackColor: defaultActiveTrackColor,
    this.inactiveTrackColor: defaultInactiveTrackColor,
    this.thumbColor: defaultThumbColor,
    this.valueIndicatorColor: defaultValueIndicatorColor,
    this.activeTickMarkColor: defaultActiveTickMarkColor,
  });

  // 获取值的文本表示形式，限制到指定的小数位数
  String get lowerValueText => lowerValue.toStringAsFixed(valueIndicatorMaxDecimals);
  String get upperValueText => upperValue.toStringAsFixed(valueIndicatorMaxDecimals);

  // 构建 RangeSlider 并根据参数自定义主题
  Widget build(BuildContext context, frs.RangeSliderCallback callback) {
    return Container(
      width: double.infinity,
      child: Row(
        children: <Widget>[
          Container(
            constraints: BoxConstraints(minWidth: 40.0, maxWidth: 40.0),
            child: Text(lowerValueText),
          ),
          Expanded(
            child: SliderTheme(
              data: SliderTheme.of(context).copyWith(
                overlayColor: overlayColor,
                activeTickMarkColor: activeTickMarkColor,
                activeTrackColor: activeTrackColor,
                inactiveTrackColor: inactiveTrackColor,
                thumbColor: thumbColor,
                valueIndicatorColor: valueIndicatorColor,
                showValueIndicator: showValueIndicator
                    ? ShowValueIndicator.always
                    : ShowValueIndicator.onlyForDiscrete,
              ),
              child: frs.RangeSlider(
                min: min,
                max: max,
                lowerValue: lowerValue,
                upperValue: upperValue,
                divisions: divisions,
                showValueIndicator: showValueIndicator,
                valueIndicatorMaxDecimals: valueIndicatorMaxDecimals,
                onChanged: (double lower, double upper) {
                  callback(lower, upper);
                },
              ),
            ),
          ),
          Container(
            constraints: BoxConstraints(minWidth: 40.0, maxWidth: 40.0),
            child: Text(upperValueText),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter范围选择滑块插件flutter_range_slider的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼

更多关于Flutter范围选择滑块插件flutter_range_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_range_slider 是一个用于在 Flutter 应用中实现范围选择滑块的插件。它允许用户通过滑动两个滑块来选择一定范围内的值。以下是如何使用 flutter_range_slider 插件的详细步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_range_slider 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_range_slider: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_range_slider 包：

import 'package:flutter_range_slider/flutter_range_slider.dart';

3. 使用 RangeSlider 组件

你可以在你的 Flutter 应用中使用 RangeSlider 组件来实现范围选择滑块。以下是一个简单的示例：

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

class RangeSliderExample extends StatefulWidget {
  @override
  _RangeSliderExampleState createState() => _RangeSliderExampleState();
}

class _RangeSliderExampleState extends State<RangeSliderExample> {
  double _lowerValue = 20.0;
  double _upperValue = 80.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Range Slider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Lower Value: $_lowerValue'),
            Text('Upper Value: $_upperValue'),
            SizedBox(height: 20),
            RangeSlider(
              min: 0.0,
              max: 100.0,
              lowerValue: _lowerValue,
              upperValue: _upperValue,
              divisions: 10,
              showValueIndicator: true,
              valueIndicatorMaxDecimals: 1,
              onChanged: (double newLowerValue, double newUpperValue) {
                setState(() {
                  _lowerValue = newLowerValue;
                  _upperValue = newUpperValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: RangeSliderExample(),
));

4. 参数说明

min: 滑块的最小值。
max: 滑块的最大值。
lowerValue: 当前选中的最小值。
upperValue: 当前选中的最大值。
divisions: 滑块的分段数，如果设置为 null，则滑块是连续的。
showValueIndicator: 是否显示值指示器。
valueIndicatorMaxDecimals: 值指示器显示的小数位数。
onChanged: 当滑块值发生变化时调用的回调函数。

5. 运行应用

保存文件并运行你的 Flutter 应用。你应该会看到一个范围选择滑块，用户可以通过滑动两个滑块来选择一定范围内的值。

6. 自定义样式

你可以通过 RangeSlider 的其他参数来自定义滑块的外观，例如 activeTrackColor、inactiveTrackColor、thumbColor 等。

RangeSlider(
  min: 0.0,
  max: 100.0,
  lowerValue: _lowerValue,
  upperValue: _upperValue,
  divisions: 10,
  showValueIndicator: true,
  valueIndicatorMaxDecimals: 1,
  activeTrackColor: Colors.blue,
  inactiveTrackColor: Colors.grey,
  thumbColor: Colors.red,
  onChanged: (double newLowerValue, double newUpperValue) {
    setState(() {
      _lowerValue = newLowerValue;
      _upperValue = newUpperValue;
    });
  },
),