【Flutter/Dart⑤】Flutterのレイアウトについて

さあ今回は”レイアウト”の作り方について学んでいこう!!

前回までは”Widget”についてまとめてきました👇

【Flutter/Dart④】Flutterのウィジェットについて

FlutterはWidgetを組み合わせていくことで複雑なUI表現できることを学びました。
レイアウトに関しても同じことが言えるため、前回の学びを踏まえて学習していこう✊

では早速やっていきます。

Container

✅ ボックスを表現することができる

👇Containerを使った実装例になります

Row, Column

✅ mainAxisAlignment(start, center, end):上中下の調整
✅ crossAxisAlignment(start, center, end):左中右の調整

👇Containerの中でRow, Columnを使った実装例になります(その1)

👇 Containerの中でRow, Columnを使った実装例になります(その2)

Expanded

✅ 画面いっぱいに引き伸ばすことができる
✅ RowやColumnなどと一緒に使うことが多い
✅ WidgetではなくContainerなどに対して適応⇨width: double.infinity
Expanded(Flexibleなどの拡張性のあるWidget)はRow, Column, flexを親Widgetにする

👇 expandedを使った実装例になります

Stack

✅ Widgetを重ねることができる

👇 Stackを使った実装例になります

Theme

MaterialAppのTheme設定できるプロパティについてめちゃめちゃ役に立つ記事があったので共有させて下さい👇
https://itome.team/blog/2019/12/flutter-advent-calendar-day12/

“【Flutter/Dart④】Flutterのレイアウトについて”は以上になります、いかがだったでしょうか?

他にもどんなWidgetがあるのか、こちらのまとめが参考になったので見てみて下さい👇
Flutter開発する前に知っておきたい35のWidget一覧

次回はインタラクティブなWidgetを学習していきたいと思います、楽しみにしてて下さいね!

今回はこの辺で、ばいばい👋