[Flutter]LinearProgressIndicatorを縦方向(vertical)にするには？

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

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

方法
使用例

方法

LinearProgressIndicatorを縦方向にするには、Transform.rotateを使います。

まず、Transform.rotateの引数「child」にLinearProgressIndicatorを指定します。

そして、LinearProgressIndicatorの引数「angle」に、「pi / 2」もしくは「- pi / 2」を指定します。

Transform.rotate(
  angle: - pi / 2, 　// (pi / 2)を指定すると逆向きになる
  child: LinearProgressIndicator(),
),

Transform.rotateを使えば、LinearProgressIndicatorを縦方向にすることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform.rotate(
          angle: -pi / 2,
          child: LinearProgressIndicator(
            value: 0.7,
          ),
        ),
      ),
    );
  }