Column
は縦にウィジェットを配置することのできるウィジェットです。
画面中央にウィジェットを配置できる Center
と組み合わせて2つのテキストを次のようなコードで画面中央に配置しようとしたところ、画面上部に表示されてしまいました。
ちなみにColumn
でラップしないときは中央に表示されます。
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Text("Hoge"),
Text("Fuga"),
],
),
),
);
}
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F18273%2Fb6c2c735-d8b9-c65d-ebec-51761c63abe5.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3fe0b54b05a95f42ff568b0bf409a893)
調べてみたところStackOverflowによると、Column
はデフォルトで画面の最大の高さまで広がってしまうようです。
意図したように表示するためには次の例のようにmainAxisSize
をMainAxisSize.min
にして軸方向のサイズを最小に指定すればよいです。
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("hoge",style: TextStyle(fontSize: 40.0),),
Text("fuga",style: TextStyle(fontSize: 40.0),),
],
),
),
);
}
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F18273%2Fcef1eecf-2244-d53a-23de-3d9b884a39a0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f631fbf65b6a14410efda400a01db533)
無事Columnのコンテンツが中央に表示されました。