すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】ウィジェットを傾ける方法

本エントリではウィジェットを傾けて表示する方法を以下の流れで説明する。



ウィジェットを傾ける方法

傾いていることがわかりやすいように、上を向いた矢印のアイコンIcon(Icons.arrow_upward)を傾ける。

傾いていない状態では次の画像の様な表示になる。

傾いていない状態

また以降で説明する方法を用いて傾けた状態は次の画像の様になる。

90度傾けた状態

Containertransformプロパティで傾ける

ContainertransformプロパティにMatrix4.rotationZ(回転角)を指定することでchildに指定した子ウィジェットを回転させることができる。

回転角に入る値の単位はラジアンになる点に注意。回転角度 * pi / 180で指定するのが楽。

piは円周率のことで、dart:mathライブラリに含まれている。

Transform.rotate()で傾ける

Transform.rotate()childに指定したウィジェットを回転させることができる。 Containerを用いた方法よりも素直に記述できる。

回転させる角度はangleプロパティに回転角度をラジアンで指定する。

RotatedBoxで傾ける

RotatedBoxを用いる方法は、前述の2つの方法と比べて制限がある。 それは「90度単位でしか回転角度を指定できない」という点。

quarterTurnsプロパティにint型の値を指定する。指定した値 × 90度childプロパティに指定した子ウィジェットが回転する。


3つの方法の違い

Containerを用いる方法とTransform.rotate()を用いる方法は大きな差はない。 回転角度を細かく設定できるのでどちらでも良いが、筆者的にはTransform.rotate()の方がシンプルに書ける気がする。 またRotatedBoxは90度単位でしか回転ができないので使用する場面が限られそうと感じた。