【FlutterFlow】３つのポイントで振り返る！レイアウトの基本を総まとめ
どうも、こんにちは～。前回記事からの続きです。FlutterFlowの公式資料を参考にして、レイアウトの「基本のき」を学んでまいりました。
前回は、テキストウィジェットを追加の上、スクロールを実現するためにcolumnウィジェットをListViewに変更したのでした。いや、意外なところに大事なポイントがありましたねぇ～。
今回は、その一連の学習を振り返って、総まとめしたいと思います。今回の記事を1分間目を通していただくだけでも、FlutterFlowのレイアウトのコツを知ることができますよ～。
ということで、ぜひ続きをどうぞ～。
６っつのシリーズ記事をご紹介
まずは、過去記事のリンクを出しておきますね。合計６つです。順番に読み通りしたい方は、ぜひご利用ください♪
今回のシリーズのハイライト
「レイアウトの基本を学ぼう」というのが今回のシリーズのコンセプトでした。
そもそも何でこれに取り組もうと思ったのかは、「FlutterFlowのウィジェットツリーの構造がさっぱりわからなかったから」です。
「適当にレイアウトを思いつきで作ったらいずれ破綻するかも…」
そんな恐怖におびえながらアプリを作るのっていやじゃないですか？
そんな恐怖を解消するためです。結果として、その恐怖は、（だいたい）克服できました～！
お役立ちポイントをご紹介しましょう！
１．レイアウトの設計図はUIビルダーに着手する前に作っておく
ああ、言っちゃいました。一番重要なことを…。もう、これだけで今回の取り組みに価値がありました。
UIビルダーに着手するのは、だいぶ後の工程何ですよね～。要件をまとめ、データを設計してダミーデータを準備し、そして、「UIを設計」して、そこでやっとUIビルダーに入ります（実際は、工程を行ったり来たりするのですけれども）。
設計といってもたいしたことはなく、ワイヤーフレーム的なものを手書きしただけでした。
これだけでも安心感が違いますし、何より「手書きしながら思考が整理」されます。
そして、さらに下の階層は、別の場所に書き出しました。
この手順なら、どんなに入れ子が複雑になっても、混乱することはないでしょう。
２．カラム→ロウ→カラム→ロウのパターンで入れ子を作る
ああ、この原則を知っていれば、ウィジェットツリーの恐怖にさいなまれなかったのにな～と思いますね。
スマホは縦長です。ですから、フツーはウィジェットをタテに配置します。ですから、最初にcolumnが必要です。
タテに配置されたウィジェットは、横長になります。ですから、次に必要な器として、子要素を水平に配置するロウが必要です。
さらに、ロウによって水平方向に配置される子要素は、縦長に配置することになることが多くなります。つまり、ロウの中にcolumnが必要です。
言われてみれば、「そりゃそうだ」と思うのですが、これを言語化できただけでなんか頭がすっきりしました。
３．パッディングの値は事前に決めておき、ウィジェットを置いたら先に設定する
パッディングの値は、子要素のレイアウトに影響をあたえます。
また、1階層目のカラム内のウィジェットの各パッディング値が統一されていないとバラバラな印象のUIになってしまいます。
今回は、ImageとText間が12px、残りのウィジェット間が16pxでした（たしか）。
設計図を書く段階で、パッディング値も考えておけるとよかったなと思います。これは今回の反省点ですね。
このほか、「スクロールされるなら、カラムをListViewに置き換える」など、まだいくつかポイントはありますが、３つがきりがいいのでこれくらいにしておきしょう！
はい、今回のシリーズは以上となります～。面白く、そして学びの多かったシリーズでした～。
次回からは、いよいよアクションに手をつけようかな…。
ではまた～。
この記事が気に入ったらサポートをしてみませんか？