【日本語版】【Flutter】Widget of the Week – #25 Align【要約】

動画

要約

  • Align widgetでwidgetの配置位置を自由に変えられる(左寄せ、下寄せなど)
  • 数値を使って細かく位置を指定することもできる

内容

様々なwidgetを組み合わせて使えるということは、Flutterの最大の特徴です。

しかし、親widgetの好きな場所に子widgetを配置するにはどうすればいいでしょうか?
例えば、Container widgetの中にText widgetを配置する場合、Text widgetの位置はどのように決めればいいでしょうか?
 

青い枠線がContainerを意味している。
Containerの中の好きな場所にText(Hello!)を配置するにはどうする?

最も簡単なのは Center widgetで中央に配置する方法です。
 

中央に配置するなら、Center widgetでラップすればいい。

では、右下に配置したい場合はどうすればいいでしょうか?

そんなときは、Align widgetを使ってください。

Alignは親widgetの中で指定した場所に子widgetを配置してくれます。
場所の指定にはalignmentプロパティを使います。
 

alignmentにbottomRightを指定して右下に配置
topLeftを指定して、左上に寄せる
centerRightで中央右寄せ

位置を具体的な数値で指定することもできます。
下のイメージのように、-1から+1の範囲で具体的な位置を表すことができます。
この方法により、より細かい位置の指定が可能になります。
 

(0, 0)を指定して、中央揃え
(1, 0.5) を指定すると、こんな位置に。
(0.6, -0.8) を指定すれば、ここに。
自由自在に位置をコントロールできます。

また、AlignはStackの中での配置にも利用できます。
 

まとめ

Widget of the Weekの#25 Alignの日本語翻訳版でした。

Alignを使う機会はとても多いと思います。

Alignを使えば、簡単にwidgetのレイアウトを整えることができます。
まだ使ったことがない方は是非一度使ってみてください!

■ 次の記事はこちら
#26 – Positioned

■Widget of the Week まとめ
Widget of the Week 一覧