[Flutter]RangeSliderにラベル(label)を表示するには？

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

RangeSliderにラベルを表示する方法を紹介します。

方法
使用例

方法

RangeSliderにラベルを表示するには、引数「divisions」と引数「labels」を使います。

まず、RangeSliderの引数「divisions」に最大値を何等分ずつ変化するようにするかを指定します。

次に、引数「lables」にRangeLabelsを指定します。

そして、RangeLabelsの第１引数に小さい方に表示する文字列、第２引数に大きい方に表示する文字列を指定します。

RangeSlider(
  divisions: /*何段階で値を変化させるか*/,
  labels: RangeLabels(
    '小さい方で表示するラベル',
    '大きい方で表示するラベル',
  ),
  ・・・
),

引数「divisions」ち引数「labels」を使えば、RangeSliderにラベルを表示することが出来ます。

使用例

以下は、使用例です。

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

class _MyHomePageState extends State<MyHomePage> {
  
  var _rangeValue = RangeValues(0.3, 0.6);
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: RangeSlider(
            divisions: 10, //１０分割
            labels: RangeLabels(
              '${_rangeValue.start}',
              '${_rangeValue.end}',
            ),
            values: _rangeValue,
            onChanged: (newValue) {
              setState(() {
                _rangeValue = newValue;
              });
            },
          ),
        ),
      ),
    );
  }
}