このチャプターの目次
Transform.rotate で回転軸をいい感じにする
Transform.rotateで角度だけを指定すると、デフォルトの回転軸は領域の中央になっている。 ほとんど場合これで事足りるが、任意の回転軸を指定したい場合があります。
(例: ユーザーがタッチした位置を中心に回転させたいケースなど)
alignment と origin を組み合わせることで回転軸を設定することができる。alignment に一律 Alignment.topLeft を指定おけば原点が左上になるので、origin にコンポーネント内の位置をそのまま設定することができます。
GestureDetector のジェスチャーイベントの localPosition と組み合わせるのも容易になります。
コンポーネント上の Offset(x, y) を軸にして回転させたい場合
Transform.rotate(
angle: rotationAngle,
alignment: Alignment.topLeft,
origin: Offset(x, y),
child: ChildWidget(),
),
補足
回転させてもコンポーネントが確保する領域は変わらない
Transformは表示に変更を加えるもので、実際に Widget として確保する領域は変わらない。
例えば以下のように二つのコンポーネントを詰めて並べていたとしても、レイアウトの計算に影響を与えたりオーバーフローが発生したりはしない。
関連 Tweet
追従性を損なわずに回転させる例
アイコンを揺らしている例
Tinder UI で回転を使用している例