Flutter范围选择器插件 range_slider_flutter 的使用

简介

range_slider_flutter 是一个功能强大的范围选择器插件，允许用户自定义滑块的外观和行为。通过简单的平滑动画，可以提供一个美观且干净的用户界面。

开始使用

安装

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_range_slider: ^最新版本号

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

导入包

在 Dart 文件中导入该包：

import 'package:range_slider_flutter/range_slider_flutter.dart';

基本实现

以下是一个基本的 RangeSliderFlutter 使用示例：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _lowerValue = 50;
  double _upperValue = 180;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          margin: EdgeInsets.only(top: 20, left: 20, right: 20),
          alignment: Alignment.centerLeft,
          child: RangeSliderFlutter(
            values: [_lowerValue, _upperValue],
            rangeSlider: true,
            tooltip: RangeSliderFlutterTooltip(
              alwaysShowTooltip: true,
              rightSuffix: Text(" Br"),
              leftSuffix: Text(" Br"),
            ),
            max: 20000,
            textPositionTop: -100,
            handlerHeight: 27,
            textBackgroundColor: Colors.red,
            trackBar: RangeSliderFlutterTrackBar(
              activeTrackBarHeight: 10,
              inactiveTrackBarHeight: 10,
              activeTrackBar: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.red,
              ),
              inactiveTrackBar: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.grey,
              ),
            ),
            min: 0,
            fontSize: 15,
            onDragging: (handlerIndex, lowerValue, upperValue) {
              _lowerValue = lowerValue;
              _upperValue = upperValue;
              setState(() {});
            },
          ),
        ),
      ),
    );
  }
}

属性说明

• values: 滑块的最小值和最大值列表。
• rangeSlider: 将滑块转换为范围滑块的布尔值。
• tooltip: 显示范围值的工具提示。
• max: 最大范围值。
• textPositionTop: 文本框的位置（使用负整数）。
• handlerHeight: 滑块手柄的高度。
• trackBar: 滑块轨道的装饰属性。
• min: 最小范围值。
• fontSize: 标签字体大小。
• onDragging: 滑块值改变时的回调函数。
• textBackgroundColor: 包含文本的容器的颜色。

通过这些属性，您可以轻松定制 RangeSliderFlutter 以满足您的需求。