Question

有人知道如何在颤动中创建年龄范围滑块吗？一个滑块，它有两个输入值。有点像Tinder必须选择最小和最大年龄。一个具有两个输入fieldss

的滑块

Answer 1

由于我的一项开发也需要此小部件，因此我决定进行开发。

这是结果

我可以在GitHub

上找到源代码

关于this link的完整说明

Answer 2

感谢boeledi，library对您来说很不错。

RangeSlider(
      min: minPrice,
      max: maxPrice,
      lowerValue: _lowerValue,
      upperValue: _upperValue,
      divisions: 50,
      showValueIndicator: true,
      valueIndicatorMaxDecimals: 4,
      onChanged: (double newLowerValue, double newUpperValue) {
        setState(() {
          _lowerValue = newLowerValue;
          _upperValue = newUpperValue;
        });
      },
      onChangeStart: (double startLowerValue, double startUpperValue) {
        print('Started with values: $startLowerValue and $startUpperValue');
      },
      onChangeEnd: (double newLowerValue, double newUpperValue) {
        print('Ended with values: $newLowerValue and $newUpperValue');
      },
    )

将其放入小部件树中。

min 是最小值。 最大值是您想要的最大值。提供lowerValue和upperValue的初始全局值，因此，当范围更改时，该值也会更改。 divisions = n将lowerValue和upperValue之间的金额除以 n 部分。您在onChanged方法中有了新的值。祝你好运。

Answer 3

Flutter版本1.20.0

我们更新了带有标签的RangeSlider。

  class RangeWidget extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => _RangeWidget();
  }
  
  class _RangeWidget extends State<RangeWidget> {
    RangeValues _currentRangeValues = const RangeValues(0, 100);
  
    static String _valueToString(double value) {
      return value.toStringAsFixed(0);
    }
  
    @override
    Widget build(BuildContext context) {
      return new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          RangeSlider(
            values: _currentRangeValues,
            min: 0,
            max: 100,
            divisions: 10,
            labels: RangeLabels(
              _currentRangeValues.start.round().toString(),
              _currentRangeValues.end.round().toString(),
            ),
            onChanged: (RangeValues values) {
              setState(() {
                _currentRangeValues = values;
              });
            },
          )
        ],
      );
    }
  }

Answer 4

您正在寻找的是Slider小部件。我认为离散滑块最适合你想要实现的目标。

您应该查看Flutter Gallery App，其中包含许多小部件的示例以及可在其GitHub repo上找到的源代码。

从他们code查看他们的Slider Demo，我找到了可能符合您需求的示例：

new Slider(
                  value: _discreteValue,
                  min: 0.0,
                  max: 100.0,
                  divisions: 5,
                  label: '${_discreteValue.round()}',
                  onChanged: (double value) {
                    setState(() {
                      _discreteValue = value;
                    });
                  },
                ),
                const Text('Discrete'),
              ],
            )

当然，您需要调整此代码以更好地满足您的需求，但希望它能让您开始朝着正确的方向前进。

如果您有任何疑问，请与我联系！

Answer 5

//您可以尝试这个。

  double minPrice = 0;
  double maxPrice = 100;
  double _lowerValue = 0;
  double _upperValue = 100;

.......

SliderTheme(
                        data: SliderTheme.of(context).copyWith(
                          activeTrackColor: kCustomRed,
                          inactiveTrackColor: Color(0xFFE6EAEE),
                          thumbColor: kCustomRed,
                          thumbShape:
                              RoundSliderThumbShape(enabledThumbRadius: 6),
                        ),
                        child: rg.RangeSlider(
                          min: minPrice,
                          max: maxPrice,
                          lowerValue: _lowerValue,
                          upperValue: _upperValue,
                          divisions: 50,
                          showValueIndicator: true,
                          onChanged:
                              (double newLowerValue, double newUpperValue) {
                            setState(() {
                              _lowerValue = newLowerValue;
                              _upperValue = newUpperValue;
                            });
                          },
                        ),
                      ),

如何在颤动中创建年龄范围滑块？

5 个答案: