Как создать ползунок диапазона возраста в флаттере?

Question

Кто-нибудь знает, как создать ползунок диапазона возраста в флаттере?Ползунок, который будет иметь два входных значения.Что-то вроде того, что Tinder должен выбрать минимальный и максимальный возраст.ползунок, который имеет два поля ввода

Answer 1

Поскольку мне также понадобился этот виджет для одного из моих разработок, я решил его разработать.

Вот результат

Исходный код можно найти на GitHub

Полное объяснение на по этой ссылке

Answer 2

Благодаря boeledi Это хорошая библиотека для вас.

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 - минимальное значение. max - максимальное значение, которое вы хотите.Дайте lowerValue и upperValue начальное глобальное значение, поэтому при изменении диапазона эти значения тоже будут меняться.divisions = n разделите сумму между lowerValue и upperValue до n секции.У вас есть новые значения в методе onChanged.Удачи.

Answer 3

То, что вы ищете, это виджет Slider .Я думаю, что отдельный слайдер лучше всего подойдет для того, чего вы пытаетесь достичь.

Вам следует взглянуть на Приложение Flutter Gallery , в котором есть примеры многих виджетов вместе с исходным кодом, который можетможно найти в их репозитории GitHub .

Глядя на их код из их 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'),
              ],
            )

Конечно, вам нужно будет скорректировать этот код в соответствии с вашими потребностями, но, надеюсь, он поможет вам начать работу в правильном направлении.

Дайте мне знать, если у вас есть какие-либо вопросы!