[Flutter]Container(コンテナ)を回転(rotate)するには？

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

Containerを回転する方法を紹介します。

方法

Containerを回転するには、Transform.rotateを使います。

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

そして、引数「angle」に角度をラジアンで指定します。

Transform.rotate(
  angle: /*ラジアンで角度を指定*/,
  child: Container(),
),

ラジアンの計算は、「(角度) x (π) ÷ 180」です。

ラジアンが分からないという人は、計算はしないで、とりあえず「(π) ÷ 180」に角度を掛けましょう。

以下は、使用例です。

使用例

Transform.rotate(
  angle: 90 * pi / 180, //90度を「(π) ÷ 180」にかける
  child: Container(
    color: Colors.blue,
    child: Text(
      'Flutter',
      style: TextStyle(
        fontSize: 50,
        color: Colors.white,
      ),
    ),
  ),
),