🐡

【Flutter】AlignとPositionedの位置指定の違いについて

に公開
Flutter
stack
align
positioned
tech

画面サイズ拡大すると画像がズレる

画面サイズを拡大すると予期せぬずれがおきますよね。
特に高齢者向けのサービスやっている方だとわかるかなと。

んで今回stack使用時の画像位置にてズレがおきましてタイトルにある通り両者を使用してました。
両者の違いなんだろなっておもったので備忘録でかきこ。

Align

Align(
  alignment: Alignment(0.2, 0.5),
  child: Image.asset('...')
)

比率的に配置（画面サイズ対応）したいならAlign

  • Alignment(x, y) のxは左-1.0～右1.0
  • yは上-1.0～下1.0
  • (0.0, 0.0) → 中央、(1.0, 1.0) → 右下、(-1.0, -1.0) → 左上
  • 画面サイズが変わっても比率で保たれる
  • 使う場面として比率で柔軟にレイアウトしたい、画面対応したいときに向いてる

Positioned

Stack(
  children: [
    Positioned(
      right: 16,
      top: 40,
      child: Image.asset('...'),
    ),
  ],
)

ピクセル単位でガッチリ配置したい Positioned（＋Stack）

  • right: 16 → 右端から16px
  • top: 40 → 上から40px
  • 必ずStackの中で使う必要がある
  • ピクセル単位の正確なレイアウトが可能
  • 使う場面としてデザインで「この位置にピッタリ置きたい」ってとき（バッジ、ボタン、吹き出しなど）

結論

こうなりました。

Align

対象:　親の中での 比率での位置指定
親が必要:　通常のレイアウトでも使える
指定方法:　Alignment(x, y) → 比率ベース
柔軟性:　画面サイズに応じて柔軟に配置されること多い

Positioned

対象:　Stack の中での 絶対位置指定（px）
親が必要:　Stack の中でしか使えない
指定方法:　top, right, bottom, left → 距離ベース
柔軟性:　完全にピクセル指定でカチッと置きたいとき向き

画面サイズを端末側で大きくするとその分pxが大きなってずれるんじゃないかなと。
Positionedの方が影響が大きいのでそういう場合はAlignので指定してあげる方がいいかも。

注意

Align、Stackは親にサイズがないと使えないのでそこは注意！

結構忘れがちでやりがち。

以上！！！

Discussion