如何在 flutter 中創建自定義范圍 slider 小部件？

Question

slider 必須根據用戶輸入獲取 n 個拇指。 需要 select 的百分比范圍。 我剛剛開始使用 Flutter。 我已經能夠很好地遵循一些教程。 任何幫助深表感謝！

class _SliderScreenState extends State<SliderScreen> {
  RangeValues values = RangeValues(1, 100);
  RangeLabels labels = RangeLabels('1', "100");
  double _currentSliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RangeSlider Demo'),
      ),
      
      body: SliderTheme(
        data: SliderThemeData(
          trackHeight: 10,
        ),
        child: RangeSlider(
            divisions: 5,
            activeColor: Colors.red[700],
            inactiveColor: Colors.red[300],
            min: 1,
            max: 100,
            values: values,
            labels: labels,
            onChanged: (value) {
              print("START: ${value.start}, End: ${value.end}");

              setState(() {
                values = value;
                labels = RangeLabels("${value.start.toInt().toString()}\$",
                    "${value.start.toInt().toString()}\$");
              });
            }),
      ),
    );
  }
}

Answer 1

我推薦的一個 package 是使用https://pub.dev/packages/syncfusion_flutter_sliders ，它帶有多種定制選項和強大的性能。

PS：他們的 API 文檔也很出色，這使得它更易於使用。

Answer 2

在這里你 go，修改你想要的

class _SliderScreenState extends State<SliderScreen> {
  RangeValues values = RangeValues(1, 100);
  RangeLabels labels = RangeLabels('1', "100");
  int divisions = 5;
  List strLabels = [];

  @override
  void initState() {
    super.initState();

    strLabels = [for (var i = 0; i <= values.end; i += (values.end ~/ divisions)) i];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RangeSlider Demo'),
      ),
      
      body: ListView(
         shrinkWrap: true,
         children: [
         Container(
                width: MediaQuery.of(context).size.width * .95,
                child: Column(
                  children: [
                    SliderTheme(
                      data: SliderThemeData(
                        trackHeight: 10,
                      ),
                      child: RangeSlider(
                        divisions: divisions,
                        activeColor: Colors.red[700],
                        inactiveColor: Colors.red[300],
                        min: 1,
                        max: 100,
                        values: values,
                        labels: labels,
                        onChanged: (value) {
                          print("START: ${value.start}, End: ${value.end}");

                          setState(() {
                            values = value;
                            labels = RangeLabels(
                                "${value.start.toInt().toString()}\$", "${value.start.toInt().toString()}\$");
                          });
                        },
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * .05),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: strLabels.map((i) {
                          print(i);
                          return Text('$i%');
                        }).toList(),
                      ),
                    ),
                  ],
                ),
              ),
       ],
      ),
    );
  }
}