【FlutterFlow】内側の要素を土台から支えるウィジェット：コンテナ

こんにちは！FlutterFlowのウィジェットの使い方を丁寧に学ぼうという企画で記事を書いています。

さて、今回は、コンテナ・ウィジェットです。コンテナ？貨物でも輸出します？いえ、違いますよ～ｗ。

コンテナは、背景色をつけたり、角を丸めたり、子要素のサイズを制限したりする大事な機能を持つ「入れもの」です。

アプリのインターフェイスを作り込む「基盤」となって、スクリーンを論理的に小さな単位に区切ってくれます。

ということで、コンテナ、行ってみよ～。参考にするのは、こちらの公式資料です。

何はともあれインターフェイスを作ろう

では、実際に、コンテナを使って、ページの顔となるパーツを作ってみましょう！次の手順で進めます。

• コンテナを設置・設定

• そのコンテナの中にカラムを追加

• そのカラムの中に、CircleImageとテキストを追加

コンテナの設置

ページを新規追加して、ウィジェットをすべて消去するところからスタート。そして、コンテナ・ウィジェットを追加します。

追加できました～、、って小さいなｗ。大きくしましょう！

コンテナのプロパティエリアで、WidthとHeightを見つけます。デフォルトで100×100ですね。

inf（無限）と200に変更します。

はい、ページ上部に横長のエリアが作れました～。ここに、子要素を入れていくということこなります。

その前に、背景色をつけておきましょう。Fill Colorを選択します。

任意に色を選びましょう。

はい、これでまずはコンテナの設定はOKです。

カラムの追加

続いて、そのコンテナの中に、カラム・ウィジェットを追加します。子要素をタテに並べるために使うのでしたね。

よし、追加できました。

Main Axisは、デフォルト通り、Startにしておきます。とりあえずです。

どのように子要素がレイアウトされるか、キャンバスに表示されています。こういう心遣いがうれしいですよね～。

カラムについては、以上です。

CircleImageとテキストの追加

さらに、CircleImageとテキストをそのカラム内に置きましょう。次の通りになります。

さきに子要素のCircleImageとテキストを配置してから、カラムでWrapする方がスムーズかもしれません。

こうなりました。

テキストウィジェットを少し修正します。User Nameにテキストを変更して、Theme Text Styleを下のように変更しました。あれ？以前と違いますね。何か更新されたのでしょう、いつの間に。

ここまでOKですね。でもやっぱり上に空白がないのは嫌ですね。カラム・ウィジェットのAxisを変えてみましょう。

はい、きれいに配置されました～。

本日は、ここまで～。今回は、コンテナ・ウィジェットの導入ということで基本的な使い方をご紹介しました。

しかし、私としては、コンテナとカラムの役割分担の考え方が腹落ちしていません。皆さんは、どうですか？いずれ理解を深めたいと思います。

次は、コンテナの少し応用的な使い方を見ていくことにしましょう！