[Flutter]RangeSliderを使うには？

どうも、ちょげ(@chogetarou)です。

RangeSliderを使う方法を紹介します。

方法
使用例

方法

RnageSliderを使うには、RangeValuesの変数と次の２つの引数を使います。

value : 現在値
onChanged : 値が変更された時に関数を呼び出す（更新処理に使う）

まず、RangeValuesの変数を用意します。

var _rangeValue = RangeValues(min, max); //第１引数に最小値、第２引数に最大値を指定

そして、RangeSliderの引数「value」に用意した変数、引数「onChanged」に値を更新する関数を指定します。

RangeSlider(
  values: _rangeValue, //用意した変数
  onChanged: (newValue) { //引数で新しい値を受け取る
    setState(() {
      _rangeValue = newValue; //更新処理
    });
  },
),

RangeValuesの変数と２つの引数を使うことで、RangeSliderを使うことが出来ます。

使用例

以下は、使用例です。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _rangeValue = RangeValues(0.2, 0.8);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: RangeSlider(
            values: _rangeValue,
            onChanged: (newValue) {
              setState(() {
                _rangeValue = newValue;
              });
            },
          ),
        ),
      ),
    );
  }
}