【日本語版】【Flutter】Widget of the Week – #49 Stack【要約】

動画

要約

  • Stackを使えば、ColumnやRowの中でwidgetを自由自在に配置できる。
  • 指定したルールで規則的に配置することができる。
  • Positionedで個別に位置を数値で指定することもできる。

内容

ColumnやRowのレイアウトの制限に苦労していませんか?

Stack widgetを使うことで自由自在にwidgetを配置することができるようになります。

Stackはwidgetのリストを受け取って、そられを重ねて配置します。
 

デフォルトでは左上を起点にして、配置されます。
 

左上以外を指定することも可能です。
 

alignmentで指定した配置ルールは個別に位置を指定していないwidgetに対して適用されます。

widgetの位置を個別に指定したい場合はPositioned widgetを使います。
Positionedには座標を指定できるため、widgetを自由な位置に配置することができます。
 

Positionedを使った場合、widgetが親widgetをはみ出すこともあります。

Overflowプロパティを指定することではみ出した部分をそのまま表示するか、切り取るかを制御することができます。
 

overflowにclipを指定することで、
親からはみ出した部分を切り取ることができる。

まとめ

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

Stackは利用頻度が高いwidgetです。

Positionedと組み合わせてしっかり使い方を理解しておくと良さそうです。

■ 次の記事はこちら
作成中

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