如何从 Flutter 中的文本框中的滑块获取值？

Question

我有一个从用户那里获取输入的滑块，我想在文本字段中获取该输入，因为滑块的值不断变化。以下是滑块和文本字段的图像。

代码=>

SliderTheme(
          data: SliderThemeData(
            trackHeight: 8,
             ...
             ...
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: EdgeInsets.fromLTRB(0, 50, 0, 20),
                child: Text(
                  'Enter the amount you wish to add',
                 
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 28.0),
                child: SizedBox(
                  child: Row(
                    children: [
                      buildSideLabel(sliderMinValue),
                      Expanded(
                        child: Slider(
                          value: sliderAmount,
                          min: sliderMinValue,
                          max: sliderMaxValue,
                          divisions: 50000,
                          label: sliderAmount.round().toString(),
                          onChanged: (sliderAmount) => setState(
                              () => this.sliderAmount = sliderAmount),
                        ),
                      ),
                      buildSideLabel(sliderMaxValue),
                    ],
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 25),
                child: Container(
                  child: TextField(
                    onChanged: (value) {
                      setState(() {
                        amount = value;
                      });
                    },
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(7),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),

我应该如何获取文本字段中的滑块值？

Answer 1

在这里你可以在你的文本字段中获取滑块值，首先创建TeztEditingController

TextEditingController valueTextController = TextEditingController();

然后在更改滑块时执行以下操作

Center(
        child: Column(
          children: <Widget>[
            TextField(
               controller: valueTextController,
            ),
            Expanded(
              child: Slider(
                  value: 5,
                  min: 0,
                  max: 10,
                  divisions: 50000,
                  onChanged: (sliderAmount) {
                    print(sliderAmount);
                    setState(
                            () => valueTextController.text = sliderAmount.toString());
                  }
              ),
            ),
          ],
        ),
      ),

每次更改滑块值时，您都会获得更新的值

Answer 2

试试下面的代码希望对你有帮助。参考 Slider

声明 int 和 TextEditingController 变量

  int _currentSliderValue = 1;
  TextEditingController sliderController = TextEditingController();

您的小部件：

 Column(
  children: [
    Slider(
      value: _currentSliderValue.toDouble(),
      max: 100,
      label: _currentSliderValue.round().toString(),
      onChanged: (double value) {
        setState(() {
          _currentSliderValue = value.toInt();
          sliderController.text = _currentSliderValue.toString();
          print(_currentSliderValue);
        });
      },
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextFormField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
        ),
        controller: sliderController,
       //if you want change the value of slider from textfield value
       /* onChanged: (text) {
          setState(() {
            _currentSliderValue = int.parse(text);
          });
        },*/
      ),
    ),
  ],
),

结果屏幕->

如何从 Flutter 中的文本框中的滑块获取值？

How do I get the value from slider in the textbox in Flutter?

flutter

flutter-layout

flutter-web