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

Question

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

但是，我尝试了，但我的 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);
                        },
                      ),
                    ),

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

Answer 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),
                  ),

Answer 2

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