[Flutter]RangeSliderを縦方向(vertically)にするには？

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

RangeSliderを縦方向にする方法を紹介します。

方法
使用例

方法

RangeSliderを縦方向にするには、RotatedBoxを使います。

まず、RangeSliderをRotatedBoxでラップします。

そして、RotatedBoxの引数「quarterTurns」に「１」もしくは「−１」を指定します。

RotatedBox(
  quarterTurns: /*１もしくは−１*/,
  child: RangeSlider(
    value: _value,
    onChanged: (newValue) {
      setState(() {
        _value = newValue;
      });
    },
  ),
),

RotatedBoxを使うことで、RangeSliderを縦方向にすることが出来ます。

RotatedBoxを使えば、RangeSliderを縦方向にできるのですが、ラベルは縦方向に出来ません。

もし、ラベルも縦方向にしたい場合は、「flutter_xlider」などのパッケージを使います。

使用例

以下は、使用例です。

RotatedBox(
  quarterTurns: 1,
  child: RangeSlider(
    values: _rangeValue,
    onChanged: (newValue) {
      setState(() {
        _rangeValue = newValue;
      });
    },
  ),
),