如何在 Flutter 中制作这个自定义 RangeSlider？

Posted 2023-02-23

【中文标题】如何在 Flutter 中制作这个自定义 RangeSlider？

【英文标题】：How to make this custom RangeSlider in Flutter?

【发布时间】：2020-10-02 05:43:41

【问题描述】：

我想制作一个如下所示的自定义范围滑块：

但是，我尝试了，但我的 RangeSlider 看起来像：

我的代码：

                      data: SliderTheme.of(context).copyWith(
                        trackShape: RectangularSliderTrackShape(),
                        trackHeight: 2.0,
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 9.0),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 18.0),
                        valueIndicatorShape: RoundSliderOverlayShape(),
                        valueIndicatorColor: Color(0xffF5F5F5),
                        valueIndicatorTextStyle:
                            TextStyle(color: Color(0xff7E3338), fontSize: 14.0),
                        rangeThumbShape: RoundRangeSliderThumbShape(),
                        rangeValueIndicatorShape:
                            PaddleRangeSliderValueIndicatorShape(),
                      ),
                      child: RangeSlider(
                        values: selectedRange,
                        min: 0.0,
                        max: 50000.0,
                        semanticFormatterCallback: (RangeValues rangeValues) 
                          return '$rangeValues.start.round() - $rangeValues.end.round() dollars';
                        ,
                        //added talk back feature for android
                        labels: RangeLabels(
                            '$selectedRange.start', '$selectedRange.end'),
                        activeColor: Color(0xff7E3338),
                        inactiveColor: Color(0xffD7D8DD),
                        onChanged: (RangeValues newRange) 
                          setState(() => selectedRange = newRange);
                        ,
                      ),
                    ),

我可以在代码中做些什么不同的事情来获得预期的输出？

【参考方案1】：

请检查此插件，您可以在其中自定义滑块，我已根据上述图像创建了示例。 但您可以根据需要对其进行自定义。

插件：https://pub.dev/packages/flutter_xlider

检查下面的代码：

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

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

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


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState 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: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
                margin: EdgeInsets.only(top: 50, left: 20, right: 20),
                alignment: Alignment.centerLeft,
                child: FlutterSlider(
                  values: [1000, 15000],
                  rangeSlider: true,

//rtl: true,
                  ignoreSteps: [
                    FlutterSliderIgnoreSteps(from: 8000, to: 12000),
                    FlutterSliderIgnoreSteps(from: 18000, to: 22000),
                  ],
                  max: 25000,
                  min: 0,
                  step: FlutterSliderStep(step: 100),

                  jump: true,

                  trackBar: FlutterSliderTrackBar(
                    activeTrackBarHeight: 2,
                    activeTrackBar: BoxDecoration(color: Colors.brown),
                  ),
                  tooltip: FlutterSliderTooltip(
                    textStyle: TextStyle(fontSize: 17, color: Colors.lightBlue),
                  ),
                  handler: FlutterSliderHandler(
                    decoration: BoxDecoration(),
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.brown,
                          borderRadius: BorderRadius.circular(25)),
                      padding: EdgeInsets.all(10),
                      child: Container(
                        padding: EdgeInsets.all(5),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(25)),
                      ),
                    ),
                  ),
                  rightHandler: FlutterSliderHandler(
                    decoration: BoxDecoration(),
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.brown,
                          borderRadius: BorderRadius.circular(25)),
                      padding: EdgeInsets.all(10),
                      child: Container(
                        padding: EdgeInsets.all(5),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(25)),
                      ),
                    ),
                  ),
                  disabled: false,

                  onDragging: (handlerIndex, lowerValue, upperValue) 
                    _lowerValue = lowerValue;
                    _upperValue = upperValue;
                    setState(() );
                  ,
                )),
          ],
        ),
      ),
    );
  

这是图片输出

您可以相应地更改颜色。

让我知道它是否有效。

查看此代码以获取工具提示：

tooltip: FlutterSliderTooltip(
                    disableAnimation: true,
                    alwaysShowTooltip: true,
                    textStyle: TextStyle(fontSize: 17, color: Colors.lightBlue),
                  ),

【讨论】：

先生，感谢您的努力！但是，标签该怎么办呢？

你能解释一下标签吗？

每个tracker上面还会显示数字吗？

查看我所做的编辑，最后添加了代码。那里有一个名为 always showtooltip 的参数，它应该为 true 并将动画禁用为 true

先生，我尝试了代码，但滑块一直卡住。

【参考方案2】：

将您的 Range Slider 包装在 Slider 主题中，并根据您的需要自定义您的滑块数据主题。使用下面的图像作为滑块的所有属性的参考和名称。

【讨论】：

显然，这是来源：medium.com/flutter-community/…