[Flutter]Slider(スライダー)を縦方向(vertical)にするには？

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

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

方法
使用例

方法

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

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

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

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

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

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

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

使用例

以下は、使用例です。

RotatedBox(
  quarterTurns: -1,
  child: Slider(
    value: _value,
    onChanged: (newValue) {
      setState(() {
        _value = newValue;
      });
    },
  ),
),