[Flutter]範囲選択(range select)できるスライダー(slider)を実装するには？

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

範囲選択できるスライダーを実装する方法を紹介します。

方法
使用例

方法

範囲選択できるスライダーを実装するには、RangeSliderを使います。

まず、選択した範囲を保持する変数を用意します。

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

次に、RangeSliderを使いたい場所に指定します。

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

RangeSlider(
  values: _rangeValue, //用意した変数
  onChanged: (newValue) {
    setState(() {
      _rangeValue = newValue; //更新処理
    });
  },
),

これで範囲選択できるスライダーが実装できます。

使用例

以下は、使用例です。

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;
              });
            },
          ),
        ),
      ),
    );
  }
}