FlutterでColumnの子要素を縦で中央寄せにする

`Column`ウィジェットの子要素`Card`ウィジェットを中央寄せにするのに手こずったので、まとめた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121224/fdff4689-8be9-3a04-3a4d-92ebc21590ce.png)

### Centerウィジェットを使った場合
その際に中央寄せの為に、`Center`ウィジェットで囲んだのですが、縦の中央寄せに失敗しました。

> By default, Column expands to fill the maximum vertical space. You can change this behavior by setting the mainAxisSize property to MainAxisSize.min, which causes the Column to take up only the minimum amount of vertical space it needs to fit its children.

> デフォルトでColumnは、最大垂直スペースを埋めるために展開されます。この動作を変更するには、mainAxisSizeプロパティをMainAxisSize.minに設定します。これにより、はColumn子に合わせるために必要な最小限の垂直スペースのみを占有します。

by https://stackoverflow.com/questions/41845693/how-can-i-tightly-wrap-a-column-of-widgets-inside-a-card

とあったので、`Column`ウィジェットのプロパティに`mainAxisSize: MainAxisSize.min`を追加することで解決しました。

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Card(
                    margin:
                        EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                    child: ListTile(
                      leading: Icon(
                        Icons.phone,
                        color: Colors.teal,
                      ),
                      title: Text(
                        '111-2222-3333',
                        style: TextStyle(
                          fontFamily: 'SyneMono',
                          fontSize: 20.0,
                          color: Colors.teal.shade900,
                        ),
                      ),
                    )),
                Card(
                  margin:
                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                  child: ListTile(
                    leading: Icon(
                      Icons.email,
                      color: Colors.teal,
                    ),
                    title: Text(
                      'test@hoge.com',
                      style: TextStyle(
                        fontSize: 20.0,
                        color: Colors.teal.shade900,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}


```

### `Column`ウィジェットのmainAxisAlignmentプロパティを使った場合

`Column`ウィジェットに、`mainAxisAlignment: MainAxisAlignment.center`を追加しても、中央寄せできました。
by https://api.flutter.dev/flutter/widgets/Column-class.html

そもそも`Card`ウィジェットは横方向に、center寄せが効いているので、`Center`ウィジェットで囲む必要がなかったです、、、

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Card(
                  margin:
                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                  child: ListTile(
                    leading: Icon(
                      Icons.phone,
                      color: Colors.teal,
                    ),
                    title: Text(
                      '111-2222-3333',
                      style: TextStyle(
                        fontFamily: 'SyneMono',
                        fontSize: 20.0,
                        color: Colors.teal.shade900,
                      ),
                    ),
                  )),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.email,
                    color: Colors.teal,
                  ),
                  title: Text(
                    'test@hoge.com',
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.teal.shade900,
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}


```

# 参考
- https://api.flutter.dev/flutter/widgets/Column-class.html
- https://qiita.com/sekitaka_1214/items/03255fd9f61685503af3
- https://stackoverflow.com/questions/41845693/how-can-i-tightly-wrap-a-column-of-widgets-inside-a-card