【FlutterFlow】カラムとロウの繰り返し？入れ子のレイアウトはこうしよう
はい、こんにちは！前回記事からの続きです。FlutterFlowの公式資料を参考にして、レイアウトを学ぼうという企画でございます。
前回は、空のページからスタートしカラムを配置しました。その後、レイアウトを事前に考えておくことが大事だよね～、というお話をしました。
そうなんですよね。行き当たりばったりでレイアウトすると、失敗します。
今回は、その続き。レイアウトの検討から再開しましょう！
レッツゴー♪
Rowの中にcolumnを配置する
まず作成する目標のレイアウトは、次のとおりでしたね。
ウィジェットを放り込みながら、レイアウト作成に着手する前に、レイアウトを検討してくことが大事という話でした。第1階層目までは、前回記事で確認したので、今度はさらに深い階層のレイアウトを考えます。
今回、着目するのは、Rowウィジェットです。
このウィジェットについては、第2階層があります。つまりRowの配下にColumnを配置して、そのcolumnのレイアウトも考える必要があるというわけです。
こうして見ていると、階層を下って入れ子のレイアウトを作るととき、column➡row➡column➡row、、、と、カラムとRowが交互に配置することが多そうですね。意識しておきたいと思います。
Rowの中のレイアウトを検討する
さて、Rowの中のカラムのレイアウトを考えましょう。最終的にはこうなります。
これもやはり、慣れないうちは、紙に書いて考えた方がよさそうですね。とうことで、再び自分で考えるからのように、ノートでレイアウトを検討します。
こんな感じですね。
Rowの中のカラムの中に、Text、Text、Imageを配置します。左の端のカラムより右側は、Backend Queryを表示させることが多いですし、とりあえずそのままです。
う～ん、手書きしているとレイアウトのイメージが頭にインストールされる感じです。
これでレイアウトの全体像は、つかめました！
はい、今日は、ここまで～。今回は、第２階層目にあたるRowの中のカラムの構成を考えました～。ここまでくれば、プロジェクトに手書きレイアウトのイメージを反映していくだけですね！
次回は、いよいよウィジェットを追加していきましょう。楽しみだな～。
この記事が気に入ったらサポートをしてみませんか？