【Flutter】 Layoutチートシート (Column & Row Widget)

#概要
Flutterの「**Column Widget**」と「**Row Widget**」を使ったレイアウトを紹介します。

#レイアウト一覧

###[ 原型 ]
![Collage_Fotor.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/1075ab7c-7ba4-2528-7b61-da8be5cd8285.jpeg)

```main.dart
Column /*or Row*/(
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

##VerticalDirection

####VerticalDirection.up
![スクリーンショット 2020-05-06 15.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/ee5eace2-485f-00fe-05bc-22f47548be5f.png)

```main.dart
Column(
  verticalDirection: VerticalDirection.up,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

####VerticalDirection.down
![スクリーンショット 2020-05-06 15.33.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/37f01c21-99c3-264e-cbf4-96478568bb28.png)

```main.dart
Column(
  verticalDirection: VerticalDirection.down,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

##MainAxisAlignment

####MainAxisAlignment.start
![Collage_Fotor2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/18ea4270-749b-11ff-cc13-91f0fea2bc65.jpeg)

```main.dart
Column /*or Row*/(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

####MainAxisAlignment.end
![Collage_Fotor3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/e2b49f55-2708-b3e8-942a-6e3fbe082d6b.jpeg)

```main.dart
Column /*or Row*/(
  mainAxisAlignment: MainAxisAlignment.end
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

####MainAxisAlignment.center
![Collage_Fotor4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/ef0811df-5bb1-4c16-639e-c40a4a01e726.jpeg)


```main.dart
Column /*or Row*/(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

####MainAxisAlignment.spaceAround
![Collage_Fotor5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/c418f99d-9758-886a-a390-b256d24899da.jpeg)

```main.dart
Column /*or Row*/(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

####MainAxisAlignment.spaceEvenly
![Collage_Fotor6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/927e44eb-389e-ba52-1e7c-5ae38e4a6997.jpeg)

```main.dart
Column /*or Row*/(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

####MainAxisAlignment.spaceBetween
![Collage_Fotor7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/943490cf-481d-b585-9a12-d69297ecbffc.jpeg)

```main.dart
Column /*or Row*/(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

##CrossAxisAlignment
※CrossAxisAlignmentの効果をみるため、4つ目の**Container**を追加しました。

####CrossAxisAlignment.start
![Collage_Fotor8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/3f8f82d8-7770-3f79-62f5-5f37b449a90c.jpeg)


```main.dart
Column /*or Row*/(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
    Container()
  ],
),
```

####CrossAxisAlignment.end
![Collage_Fotor9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/b6f3d7d8-f684-b97f-7268-b0bab9b4bf90.jpeg)

```main.dart
Column /*or Row*/(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
    Container()
  ],
),
```

####CrossAxisAlignment.center
![Collage_Fotor10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/29ec2e12-b9a4-650d-ecab-43c538544d44.jpeg)

```main.dart
Column /*or Row*/(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
    Container()
  ],
),
```

####CrossAxisAlignment.stretch
![Collage_Fotor11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/410e939d-660c-fce9-de87-d1f69e3ac6f2.jpeg)

```main.dart
Column /*or Row*/(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
    Container()
  ],
),
```

##MainAxisSize

####MainAxisSize.min
![Collage_Fotor12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/d21ccfdc-ecd6-28dc-c40f-c8d0beac1284.jpeg)

```main.dart
Column /*or Row*/(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```

####MainAxisSize.max
![Collage_Fotor13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/5e41804a-8359-7f21-f028-5f434c3d6fb2.jpeg)

```main.dart
Column /*or Row*/(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Container(
      height: 100,
      width: 100,
      color: Colors.pink,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.cyan,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
      child: Text('Container 3'),
    ),
  ],
),
```