Как построить слайдер динамического диапазона во флаттере?

Я хочу создать ползунок динамического диапазона, в котором я обновляю значения (минимальное, максимальное и деления) ползунка диапазона, выбирая кнопку раскрывающегося списка. Есть ли этому примеры? Я не нашел ни одного в Интернете. Спасибо!


person Toni Mahoni    schedule 17.05.2020    source источник


Ответы (1)


В качестве состояний можно использовать стандартный виджет RangeSlider и значения low и high. Затем вы можете изменить эти значения в setState((){}), и ползунок обновится соответствующим образом.

Вот пример, где FloatingActionButton устанавливает значения 4 и 6:

class _MyHomePageState extends State<MyHomePage> {
  static const min = 0.0;
  static const max = 10.0;
  double low = min;
  double high = max;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RangeSlider(
              min: min,
              max: max,
              values: RangeValues(low, high),
              onChanged: (values) => setState((){
                low = values.start;
                high = values.end;
              }),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState((){
          low = 4;
          high = 6;
        }),
        child: Icon(Icons.add),
      ),
    );
  }
}
person MickaelHrndz    schedule 17.05.2020