【Flutter】レイアウト系Widgetまとめ

# レイアウト系の基本的なWigetまとめ
- Column
- Row
- Center
- SizedBox

## Column(子Widgetを縦並びにしてくれる)
- children: []の中にWidgetを羅列することで縦並びに配置される
- crossAxisAlignment: 子Widgetの横方向の配置や幅を指定する
    - CrossAxisAlignment.start:左に詰める
    - CrossAxisAlignment.center:中央揃え
    - CrossAxisAlignment.end:右に詰める
    - CrossAxisAlignment.stretch:全ての子Widgetを横幅いっぱいに広げる
- mainAxisAlignment: 子Widgetの縦方向の配置を指定する
    - MainAxisAlignment.start:最上部に揃える
    - MainAxisAlignment.center:縦方向の中央揃え
    - MainAxisAlignment.end:最下部に揃える
- width, height:指定しなければ子Widgetの大きさ

```dart
return Column (
   crossAxisAlignment: CrossAxisAlignment.center, //大きいWidgetを基準に中央揃え
   mainAxisAlignment: MainAxisAlignment.center, // 垂直方向に中央揃え
   children: [ // Widgetを羅列
    Container(
      width: 100, // 横幅が大きいWidgetが基準になる
      height: 100,
      child: const Text('Widget1'),
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      child: const Text('Widget2'),
      color: Colors.blue,
    ),
  ],
);
```
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2552610/0f313cac-a0b4-77cd-7ee2-fbb032974474.png">

## Row(子Widgetを横並びにしてくれる)
Columnが縦並びに対し、横並びになっただけ
- crossAxisAlignment: 子Widgetの縦方向の配置や幅を指定する
    - CrossAxisAlignment.start:上に揃える
    - CrossAxisAlignment.center:中央揃え
    - CrossAxisAlignment.end:下に揃える
    - CrossAxisAlignment.stretch:全ての子Widgetを横幅いっぱいに広げる
- mainAxisAlignment: 子Widgetの横方向の配置を指定する
    - MainAxisAlignment.start:左に詰める
    - MainAxisAlignment.center:中央揃え
    - MainAxisAlignment.end:右に詰める

```dart
return  Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      width: 100,
      // height: 100, CrossAxisAlignment.stretchのため設定なし
      child: const Text('child1'),
      color: Colors.red,
    ),
    Container(
      width: 50,
      // height: 50,　CrossAxisAlignment.stretchのため設定なし
      child: const Text('child2'),
      color: Colors.blue,
    ),
  ],
);
```

<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2552610/326db25e-e9cb-15fe-28d4-a2908ff7a186.png">

:::note warn
ColumnとRowの配置プロバティの違いに注意
crossAxisAlignment(crossなので)
- Column(縦):横方向の配置設定
- Row(横):縦方向の配置設定

mainAxisAlignment(main = Widgetの配列通りの方向)
- Column(縦):縦方向の配置設定
- Row(横):横方向の配置設定
:::

## Center(子Widgetを中央に配置してくれる)
```dart
return  Center(
  child: Container (
      color: Colors.red,
      child: const Text('Center Widgetでchildを真ん中に')
  ),
);
```

<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2552610/46868e38-a797-2d40-68f7-c0e60d1cb844.png">

:::note warn
Column, Rowを使用すると、ど真ん中からは始まらない
Column:横方向が中央配置
Row:縦方向が中央配置
:::

```dart
return  Center(
  child: Column(
    children: [
      Container (
          color: Colors.red,
          child: const Text('Column/Rowを使うとど真ん中からではなくなる')
      ),
      Container (
          color: Colors.blue,
          child: const Text('Column/Rowを使うとど真ん中からではなくなる')
      ),
    ],
  ),
);
```
<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2552610/2eb35d61-58e2-1102-d9c6-efb491f3a2fa.png">


## SizedBox(見えない箱状のスペースを作ってくれる)
```dart
return  Column(
  children: [
    Container (
      width: 100,
      height: 100,
      color: Colors.red,
      child: const Text('Widget1')
    ),
    const SizedBox(height: 50,),
    Container (
        width: 100,
        height: 100,
        color: Colors.blue,
        child: const Text('Widget2')
    ),
    const SizedBox(height: 200,),
    Container (
        width: 100,
        height: 100,
        color: Colors.green,
        child: const Text('Widget3')
    ),
  ],
);
```

<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2552610/65b6cb48-8903-708d-48bd-349b10c3ca9b.png">

:::note warn
Containerと何が違う？？
SizedBoxは、widthやheightでスペースを構築するが
Containerは、margin, padding, alignment, transformなど
プロパティが多い。
SizedBoxはconst修飾子を使うことでコンパイル定数として宣言できるため、実行時のインスタンス生成コストが発生しない。
よって、widthやheightだけで事足りるならSizedBoxを使用する（const忘れずに）
:::