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

tuna_flutter_range_slider 是一个功能丰富的Flutter插件，用于创建具有多种自定义选项的范围选择器。本文将介绍如何在Flutter项目中使用该插件，并提供完整的示例代码。

插件安装

首先，在你的 pubspec.yaml 文件中添加 tuna_flutter_range_slider 依赖：

dependencies:
  flutter:
    sdk: flutter
  tuna_flutter_range_slider: ^latest_version

然后运行以下命令来获取包：

flutter pub get

基本用法

单滑块示例

下面是一个简单的单滑块示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Range Slider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _lowerValue = 300;
  double _upperValue = 500;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Range Slider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlutterRangeSlider(
              values: [_lowerValue],
              max: 500,
              min: 0,
              onDragging: (handlerIndex, lowerValue, upperValue) {
                setState(() {
                  _lowerValue = lowerValue;
                });
              },
            ),
            Text('Selected Value: $_lowerValue')
          ],
        ),
      ),
    );
  }
}

范围滑块示例

范围滑块允许用户选择一个值的范围：

class _MyHomePageState extends State<MyHomePage> {
  double _lowerValue = 30;
  double _upperValue = 420;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Range Slider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlutterRangeSlider(
              values: [_lowerValue, _upperValue],
              rangeSlider: true,
              max: 500,
              min: 0,
              onDragging: (handlerIndex, lowerValue, upperValue) {
                setState(() {
                  _lowerValue = lowerValue;
                  _upperValue = upperValue;
                });
              },
            ),
            Text('Selected Range: $_lowerValue - $_upperValue')
          ],
        ),
      ),
    );
  }
}

高级用法

自定义处理程序

你可以通过 handler 和 rightHandler 属性自定义处理程序：

FlutterRangeSlider(
  ...
  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,),
  ),
  ...
)

工具提示

工具提示可以通过 FlutterSliderTooltip 类进行自定义：

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

竖直轴

设置 axis 属性为 Axis.vertical 可以使滑块竖直显示：

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