【FlutterFlow】Row内の繊細なレイアウトはこうして乗り切る！レイアウト絶賛特訓中

こんにちは！前回記事からの続きです～。FlutterFlowの公式資料に沿って、レイアウトの練習をしております！

前回は、スタック内にCircleImageを３つ追加してレイアウトしてみました。どうにもドラッグでうまく動かせないんですよね…。でも、Alignmentの設定でうまく重ねることができました。

今回は、Rowの設定をやりましょう！このRowの中にさらにカラムが入るのでしたね。どんな設定になるか、さっそく試しましょう！

よしレッツゴー♪

columnを内側に含むRow

まずは、設計図を振り返りましょうか。

Rowウィジェットは、こうレイアウトするはずでしたね。中にある長方形は、カラムを意味しています。

でもカラムの中身までは分かりませんね。ですから、ドリルダウンして、別のところに書き出したのでした。

テキスト２つと画像をタテに配置します。

はい、何をやるかは振り返ることができました。

Rowの追加

設計図を振り返ったところで、カラム配下にRowを追加しましょう。

こうなります。

続いて、プロパティで設定をしていきます。まず、Main Axis AlignmentをSpace Evenlyにします。Rowにとっての主軸は、水平方向ですね。そして、その子要素は、「均等に配置」するというわけです。

パッディングの設定もやりましょう。ウィジェットを置いたら、早めにパッディングの設定をするのでした。左右が12ポイント、トップが16ポイントにします。

すると、キャンバスはこうなります。

はい、これで子要素を受け入れる準備はできましたよ～。

columnを追加

続いで、カラムを追加します。本当は３つ必要なのですが、先に1個を仕上げておいて、それを複製した方が効率的です。ですので、カラムを追加するのは、一つだけにしておきましょう。

columnのプロパティは触りません。おそらく、上記ですでにRowで子要素の配置をきちんと行ったので不要なのかもしれんません。

columnの子要素3つを追加

では、３つの子要素を追加します。

面倒なので、３つ一気に追加しちゃいました…。

キャンバスは、こうなっています。なんか締まりのないデザインですねｗ。

はい、ここから設定を進めます。

テキストは、それぞれ、Title Large、Body mediumにしました。テキストは、任意に変更します。

するとこうなります。

うん！それっぽくなってきた。デザインで勉強したのですが、テキストサイズにきっちりメリハリをつける。例えば、見出しは20pxで、本文は10pxくらいの差をつけると、それらしくデザインできるのだそうです。余談です。

イメージをタテヨコ20pxにします。こうなります。

じゃっかん、パッディングをいじりたくなりますが、いったんOKにしておきましょう。

columnを複製する

それでは、カラムを２つ複製しましょう。

３つキレイに並びました。Space Evenlyと設定したとおりです。

追加した２つのカラム内のテキストと画像を任意に変更します。

はい、Rowが完成です♪

全体像は、こんな感じです。それっぽくなってきたぞ～。

はい、本日はここまで。今回は、Rowウィジェット内にcolumnを追加して、その子要素の追加・設定までやりました～。ちょっと、いい感じのデザインになったと思いません！？

次回は、テキストウィジェットの追加です。これでレイアウト特訓のシリーズは、終わりになるかな。

ではまた。