【FlutterFlow】「青写真」をウィジェットで肉付けしていこう！レイアウト法絶賛練習中！

前回記事からの続きです。FlutterFlow公式資料に沿って、FlutterFlowのレイアウトの基本を学んでします。

前回は、カラム内にあるRowの、そらにその中にあるカラムのレイアウトを考えました。どんなに階層が深くなってもウィジェットごとに分解してレイアウトを考えればよいことを知りました。

今回は、考えたレイアウトに沿ってウィジェットを配置していきましょう！

レッツゴー♪

レイアウト案の確認

最初に目標の確認です。こんなレイアウトを作ります。まずは上から、イメージとテキストを追加しますよ。

手書きしたレイアウト案

イメージの追加

では、イメージウィジェットを追加します。

どこに追加するのかを今一度確認しましょう。カラムの直下（カラムから見た第１階層）です。カラムがページ全体のタテのレイアウトを整えますからね。

イメージのサイズは、ヨコは、inf、タテは、450にしました。

イメージは、OKですね～。

テキストの追加

続いて、テキストの追加です。これもカラム直下に配置します。設計通りです。設計との対応関係をイメージしましょう～。

下図のように、パディングとアラインメントの設定をします。上と左だけにパッディングして左寄せします。

するとこうなります。このウィジェットの設定方法は覚えておこう！

スタイルをTitle Large（20px）にして、テキストの内容をテキトーに変えました。こうなります。

はい、キャンバスはこうなっています。

いいね、いいね♪。設計図が肉付けされていく感じがｗ。

スタックの追加

さらに、スタックの追加です。スタックは、子要素を重ねて表示させるためのウィジェットです。

カラムとロウという堅実なレイアウトを行う「お兄ちゃん」がいる一方で、ちょっとやんちゃなレイアウトをしたい「弟」みたいな位置づけです（違うｗ？）。

ということで、カラム直下にスタックを追加します。

パッディングだけ設定しておきましょう。

左パディングは、テキストと同じ12pxですが、トップのパッディングは、テキストより小さい16pxです。こうなります。

このように、パッディングとアライメントの設定は、ウィジェット追加後にさっさとやることを習慣にしたいですね。

あ、時間になりました。中途半端ですが、ここで区切ります。

今回は、レイアウト図（設計図）を元にウィジェットの一部を追加してみました。

次回は、スタックの続きから。ではまた～。