flutter - Flutter-如何从 FlutterSlider (flutter_xlider) 中获取 currentValue

Question

我正在使用flutterSilder依赖项，因为它使我可以使用“FluterSliderSteps”，从而使值的非线性增加成为可能（指数）。现在我遇到的问题是我不知道如何从滑块中获取当前值，以便使用它将值显示为其他地方的文本或保存/使用它。下面我放了一些基本代码，展示了基础。有一个填充字段类，顶部有一个文本字段，上面写着“myFeedbackText”，它应该显示该值。有人有想法吗？谢谢！https://pub.dev/packages/flutter_xlider

class flutterSlider extends StatefulWidget {
  @override
  _flutterSliderState createState() => _flutterSliderState();
}

class _flutterSliderState extends State<flutterSlider> {

  RangeValues range = RangeValues(1, 100);
  double slide = 2;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(

      body: Container(

        color: Color(0xffE5E5E5),
        child: Center(
              child: Container(
                child: Align(
                  child: Material(
                    color: Colors.white,
                    elevation: 14.0,
                    borderRadius: BorderRadius.circular(24.0),
                    shadowColor: Color(0x802196F3),
                    child: Container(
                        width: 350.0,
                        height: 400.0,
                        child: Column(
                          children: <Widget>[
                            SizedBox(height: 30,),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                  child: Text(
                                "myFeedbackText", // should display currentValue
                                style: TextStyle(
                                    color: Colors.black, fontSize: 22.0),
                              )),
                            ),

                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                               child: Builder( //Needed to find Scaffold.of(context) and display the snackbar
                                   builder: (BuildContext context) {
                                     return FlutterSlider(
                                       values: [300],
                                       max: 500,
                                       min: 0,
                                       onDragging: (handlerIndex, lowerValue, upperValue) {
                                         setState(() {});
                                       },
                                       step: FlutterSliderStep(
                                           step: 1, // default
                                           isPercentRange: true, // ranges are percents, 0% to 20% and so on... . default is true
                                           rangeList: [
                                             FlutterSliderRangeStep(from: 0, to: 100, step: 1),
                                             FlutterSliderRangeStep(from: 100, to: 300, step: 5),
                                             FlutterSliderRangeStep(from: 300, to: 500, step: 10),
                                           ]
                                       ),
                                     );
                                   }
                               ),
                              ),
                            ),

                          ],
                        )),
                  ),
                ),
              ),
            ),

      ),
    );
  }
}

标签： flutterdartflutter-slider

Answer 1

您可以在下面复制粘贴运行完整代码
您可以定义一个变量并使用和_lowerValue更新它 onDraggingonDragCompleted

代码片段

double _lowerValue = 300;
... 
Container(
      child: Text(
    "$_lowerValue",
...                         
FlutterSlider(
    values: [_lowerValue],
    max: 500,
    min: 0,
    onDragging:
        (handlerIndex, lowerValue, upperValue) {
      setState(() {
        _lowerValue = lowerValue;
      });
    },
    onDragCompleted:
        (handlerIndex, lowerValue, upperValue) {
      setState(() {
        _lowerValue = lowerValue;
      });
    },

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_xlider/flutter_xlider.dart';

class flutterSlider extends StatefulWidget {
  @override
  _flutterSliderState createState() => _flutterSliderState();
}

class _flutterSliderState extends State<flutterSlider> {
  RangeValues range = RangeValues(1, 100);
  double slide = 2;
  double _lowerValue = 300;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
        color: Color(0xffE5E5E5),
        child: Center(
          child: Container(
            child: Align(
              child: Material(
                color: Colors.white,
                elevation: 14.0,
                borderRadius: BorderRadius.circular(24.0),
                shadowColor: Color(0x802196F3),
                child: Container(
                    width: 350.0,
                    height: 400.0,
                    child: Column(
                      children: <Widget>[
                        SizedBox(
                          height: 30,
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                              child: Text(
                            "$_lowerValue", // should display currentValue
                            style:
                                TextStyle(color: Colors.black, fontSize: 22.0),
                          )),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            child: Builder(
                                //Needed to find Scaffold.of(context) and display the snackbar
                                builder: (BuildContext context) {
                              return FlutterSlider(
                                values: [_lowerValue],
                                max: 500,
                                min: 0,
                                onDragging:
                                    (handlerIndex, lowerValue, upperValue) {
                                  setState(() {
                                    _lowerValue = lowerValue;
                                  });
                                },
                                onDragCompleted:
                                    (handlerIndex, lowerValue, upperValue) {
                                  setState(() {
                                    _lowerValue = lowerValue;
                                  });
                                },
                                step: FlutterSliderStep(
                                    step: 1, // default
                                    isPercentRange:
                                        true, // ranges are percents, 0% to 20% and so on... . default is true
                                    rangeList: [
                                      FlutterSliderRangeStep(
                                          from: 0, to: 100, step: 1),
                                      FlutterSliderRangeStep(
                                          from: 100, to: 300, step: 5),
                                      FlutterSliderRangeStep(
                                          from: 300, to: 500, step: 10),
                                    ]),
                              );
                            }),
                          ),
                        ),
                      ],
                    )),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: flutterSlider(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}