Flutter Containerをいじってみる

#Container Widgetとは
`Container`はStatelessWidgetのサブクラスです。
用途は文字通りコンテナで、HTMLのdiv要素のように領域確保したり他のWidgetを入れたりします。

#設定可能なプロパティ
**width**：
　コンテナの横幅を指定します。
**height**：
　コンテナの縦幅を指定します。
**color**：
　コンテナの色を指定します。
**decoration**：
　ボーダーのスタイルを変更したい場合などに使用します。
　`color`プロパティと`decoration`プロパティを同時に指定することはできません。
　`decoration`プロパティを使用しつつコンテナの色を変更する場合は、`BoxConstraints`クラスを使用します。
**margin**：
　マージン幅を指定します。
**padding**：
　パディング幅を指定します。
**transform**：
　コンテナを回転させたりすることができます。
**child**：
　子Widgetを1つ指定します。
**alignment**：
　`child`プロパティの位置を指定します。

#サンプル
**Color**

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/720f3b5c-f203-bd31-bf42-a3fea9f474b4.png" width=40%>
　
　
**Margin**

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/ca5bd2d4-fae4-ada3-0bd0-c28871b2282d.png" width=40%>
　
　
**transform**

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    transform: Matrix4.rotationZ(0.1),
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/1b9e823a-1d5b-22af-7f2d-39f1641544c4.png" width=40%>
　
　
**child**
コンテナのサイズは子要素のサイズによって変化します。

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    child: Text('Text'),
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/9dd7b8ce-761c-862e-c16b-77f1e226c11f.png" width=40%>
　
　
**Padding**

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    padding: EdgeInsets.fromLTRB(10, 20, 50, 80),
    child: Text('Text'),
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/8d127d2c-10d9-df73-c7f6-64b70f38dba6.png" width=40%>
　
　
**Width/Height**
パターン①

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    padding: EdgeInsets.fromLTRB(10, 20, 50, 80),
    child: Text('Text'),
    width: 300.0,
    height: 300.0,
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/9285b657-52d8-5151-8665-9d70ec8acf46.png" width=40%>
　
　
パターン②

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    child: Text('Text'),
    width: 20.0,
    height: 15.0,
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/f0f8ec0a-7f84-ac2c-e11a-e9baad0ae48c.png" width=40%>
　
　
パターン③

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    child: Text('Text'),
    width: double.infinity,
    height: double.infinity,
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/4d2bf360-1006-71c9-409c-a64ec6623bc7.png" width=40%>
　
　
**alignment**
paddingで指定した余白を計算に含めています

```dart:
return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    padding: EdgeInsets.fromLTRB(10, 20, 50, 80),
    child: Text('Text'),
    alignment: Alignment.center,
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/93949859-8fdb-9524-fc0b-d7caa874e6d9.png" width=40%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/2d7c134d-f3ab-af83-4dba-ab742d18f1de.png" width=40%>
　
　
**decoration**

```dart:
return Scaffold(
  body: Container(
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    padding: EdgeInsets.fromLTRB(10, 20, 50, 80),
    child: Text('Text'),
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Colors.amberAccent,
      borderRadius: BorderRadius.circular(5.0),
      border: Border.all(
        color: Colors.black,
        width: 3,
      ),
    ),
  ),
);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100659/1fb8cf85-cdda-9205-2b89-31f07f91ddf4.png" width=40%>