技術記事

micomia株式会社の井上です。今日はContainerについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. Containerとは？

Containerとは、日本語だと物を入れる「容器」だったり「入れ物」のことを指します。

FlutterFlowにおいてもContainerはその名の通り、他のWidgetの入れ物のような役割を果たしてくれます。

2. Containerの実装方法

まずは、ContainerというWidgetを追加します。ContainerはRowの中にもColumnの中にも追加できるWidgetです。今回はColumnの中に追加していきます。

正方形のContainerが追加されました。これで実装自体は完了です。

3. Containerの詳細設定

右側のパネルにある詳細設定を見ていきます。

まずはContainer Propertiesの一番上にあるこの部分です。

ここでは四角にするのか円の形にするのかを切り替えることができます。

後ほど紹介する通り、値を設定して形を変えることもできますが、円にしたい時にはここで切り替えることで一気に設定できます。

次に、その下にあるWidthとHeightです。

Width=横幅、Height=縦幅なので、Containerのサイズをここで調整することができます。

試しにWidthを900、Heightを300にしてみます。

Widthの900は明らかに画面サイズよりも大きいはずですが、なぜかほぼ切れてしまっています。実は、この原因はColumnにあります。ColumnにPaddingがついているせいで全体が表示されなくなっていました。

なのでこのPaddingを一旦0にして再度確認してみると、横いっぱいに表示されました。

次に、Fill Colorです。ここではContainer自体の色を変えることができます。

その横にあるBorder ColorはContainerの枠線の色を変えることができます。黒にしてみるとこのように黒色の枠線がつきます。

今設定したFill ColorとBorder Colorを消したい時はカラーが書かれている箇所の左側にある×アイコンを押すことでリセットできます。

次に、その下にあるBorder Radiusです。これは角の丸みを調節することができます。4つの角それぞれにバラバラの値を入れて少し変わった形にするも良し、同じ値を入れて均等な丸みをつけるも良しです。

ただ、同じ値を入れて均等な丸みをつけるときは4つそれぞれに入れなくても、右側のUniform Radiusを選択してそこに値を入れることで、1つの値を入れるだけでそれが4つ全ての角に反映されます。

次に、Border Widthです。これは値を入れることで枠線の太さを調節できます。

その横にあるのがElevationです。Elevationを入れることで下部に影が付き、そのWidgetが浮いているような見た目になるので立体感を出したい時に使用します。

その下にあるMin W, Min H, Max W, Max Hはそれぞれ最小のWidthとHeight、最大のWidthとHeightを設定できます。

その下にあるBox ShadowはContainer全体に影をつけることができます。

その下にあるGradientは、Containerのカラーをグラデーションにすることができます。Add Colorを押すことでグラデーションにするカラーを追加することもできます。

その下にあるBackground ImageはContainerの中に画像を入れることができます。

Box Fitに関しては、基本的にこの2つのいずれかを使用することが多いです。

左側のContainは、Containerのサイズに合わせて画像の全体が表示されます。

Coverは、Containerのサイズに関係なく全体に表示されます。

最後に、一番下にあるChild Alignmentです。これはContainerの中に含まれる子要素の位置を調節することができます。Containerの子要素として、Textを追加しました。真ん中にするとContainerの真ん中に表示されます。

下にするとContainerの下側に表示されます。

4. さいごに

今回はContainerについて解説していきました。Containerは上手く活用すると実装の幅が広がるのでぜひ今回の内容を活用してみてください。

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら