Flutter Containerの使い方

Table of Contents

Table of Contents

今回、Flutterでよく使うWidget:「Container」の設定を試してみました。


成果


Containerの属性(Padding, Margin, Transform)を試してみた結果を貼っておきます。


Container_sample


Container


公式サイトでは、このような説明があります。

A convenience widget that combines common painting, positioning, and sizing widgets.

Containerの中に描画、位置設定、サイズ処理のWidgetを含めていますので、UIデザインをする場合にはよく使われている便利なWidgetです。 Containerの基本設定はこんな感じになります。

Container(
  width: 100,
  height: 100,
  constraints: new BoxConstraints.tight(Size(100, 100)),
  margin: 10.0,
  padding: 10.0,
  // color: Colors.red, //decorationと一緒に使えない。
  decoration: BoxDecoration(...),
  transform: Matrix4,rotationZ(0.1),
  alignment: Alignment.center,
  child: ...,
)

属性から見ると、サイズの設定(width、height、constraints)、外部のUIとの間隔(Margin)、内部のUIとの間隔(Padding)、背景色と背景画像の設定(decoration)などができます。

注意点としては、colorとdecoration一緒に設定するとエラーが発生します。その場合、colorの設定をdecorationの中に設定します。 具体の原因について、Container Widgetのソースコードを参考して見ればわかります。下記の処理があったので、内部でcolorとdecorationの変換を処理しているようです。

decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),


結果の内容


結果の重要な部分は下記となります。


double paddingValue = 0.0;
double marginValue = 0.0;
double bcW = 100.0;
double bcH = 50.0;
var alignment = Alignment.center;
var rad = 0.0;

...

Container(
  padding: EdgeInsets.all(paddingValue),
  margin: EdgeInsets.all(marginValue),
  constraints: new BoxConstraints.tight(Size(bcW, bcH)
  ),
  decoration: new BoxDecoration(
    border: new Border.all(width: 2.0, color: Colors.red),
    color: Colors.grey,
    borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
  ),
  alignment: alignment,
  child: new Text(
      'HelloWorld',
      style: TextStyle(color: Colors.black)),
  transform: new Matrix4.rotationZ(rad),
),

paddingmarginsizeを可変にしました。

Paddingの調整:

container_padding


感想


色んな設定をいじってみて、使い道がたくさんあると思います。 どんな場合にContainerを使うの?を個人的に少し考えてみました。

  • 背景色、背景画像を設定したい時
  • Margin、Paddingを調整したい時
  • 枠線を設定したい時
  • 位置を調整したい時

上記の場合、他のWidgetを組合せしたらできるかもしれませんが、Container一つのWidgetで対応できます。


参考

https://api.flutter.dev/flutter/widgets/Container-class.html