Container を使うと、要素にスペースを与えたり、高さや幅、背景、装飾などを与えることができます。
Containerとは
Container は要素のサイズ、配置および描画を調整するとても便利な Widget です。
使用方法
Container の child を指定して、調節したいサイズのプロパティに値を与えるだけです。
以下のコードを例にしてみましょう。
Container(
height: 150, // 200 ピクセルの高さを与える
width: 300, // 100 ピクセルの幅を与える
child: Icon( // 子要素指定
Icons.thumb_up,
),
),Icon Widget は、本来内部のアイコンがちょうど収まるほどのサイズしか持ちません。
しかし、 Container を使えば、Icon の取る領域を指定できます。
調節できるプロパティ
前章の例でみた height と width の他にもよく使うプロパティは、以下のようになります。
padding : 内側の余白
margin : 外側の余白
alignment : 子要素の配置
color : 内部の色
decoration : 色、形状、ボーダー、影、背景画像など
以下のコードは、上記で紹介したすべてのプロパティを使ってみました。
やや複雑ですが、各プロパティの意味を理解してもらえると思います。
Container(
decoration: BoxDecoration( // 枠線の装飾、背景色などの指定
border: Border.all(color: Colors.black, width: 5), // 枠線の色と太さを指定
color: Colors.yellow[200], // 内部の色を指定
),
height: 300, // 高さを指定
// width: 300
margin: EdgeInsets.symmetric(horizontal: 50), // 外側の余白を指定
child: Icon( // 子要素を指定
Icons.thumb_up,
size: 50,
),
alignment: Alignment.topLeft, // 子要素の配置を指定
padding: EdgeInsets.all(20), // 内側の余白を指定
),
上記のコードと画像を照らし合わせながら見ていきましょう。
まずは decoration プロパティで Container の枠の色と太さ、および背景の色を設定します。
次に、height で Container に高さを持たせます。
一方、width の設定がコメントアウトされているにも関わらず、Container が一定の幅を持てるのは、その下の行にある margin の働きです。
そして、Container の内側に注目すると、 child に入っている「👍 」アイコンが表示されています。
「👍 」は alignment で左上に寄せられていますが、 padding の作用の下で Container の枠から 50 ピクセルだけ保たれているのがわかります。
decoration を使う場合は color を decoration 内で書かないと、エラーになるので気をつけてください。
Container をなるべく使わない
Container はとても便利な Widget と紹介してきました。
しかし、調節できるプロパティが豊富にあるがゆえに、使用する Container の意図が一目で理解できない問題があります。
各 Widget の意図を明確に表すため、Container の代わりに、以下の Widget を使用することを推奨します。
Padding：パディングを調整する Widget
Align：小要素の配置を指定する Widget
ColoredBox：内部の色を指定する Widget
SizedBox：高さや幅のサイズを指定する Widget
DecoratedBox：デコレーションを調整する Widget
例えば、要素内側の空白 padding を指定したい時は、Container で padding を与えるより、
Padding Widget 使った方が分かりやすくなります。
以下のコード例は、全く同じ Widget を返します。
Container を使う例の方が書くコード量が短いですが、 SizedBox と ColoredBox の組み合わせの方が調節したい対象(サイズと色)がよくわかります。
Container(
width: 50,
height: 50,
color: Colors.red,
child: Icon(Icons.thumb_up),
),
SizedBox( // サイズを与える Widget
width: 50,
height: 50,
child: ColoredBox( // 色を与える Widget
color: Colors.red,
child: Icon(Icons.thumb_up),
),
),Container の使用は、アプリのパフォーマンスに少しばかり悪影響を与える可能性があります。なぜならば、 Container は immutable オブジェクトにできないため、呼び出される度にメモリを確保してオブジェクトが新しく生成される必要があります。
その一方で、これまでに説明してきた SizedBox などは 修飾子 const を付けて immutable オブジェクトにすることで、アプリのコンパイル（ビルド）時だけに生成されます。そのため、無駄な処理が省かれ、パフォーマンスに良い影響を与えます。
