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

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

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を追加することで解決しました。

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(
                      '[e-mail]',
                      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ウィジェットで囲む必要がなかったです、、、

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(
                    '[e-mail]',
                    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