本エントリではウィジェットを傾けて表示する方法を以下の流れで説明する。
ウィジェットを傾ける方法
傾いていることがわかりやすいように、上を向いた矢印のアイコンIcon(Icons.arrow_upward)
を傾ける。
傾いていない状態では次の画像の様な表示になる。
また以降で説明する方法を用いて傾けた状態は次の画像の様になる。
Containerのtransformプロパティで傾ける
Container
のtransform
プロパティに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度単位でしか回転ができないので使用する場面が限られそうと感じた。