Column
は縦にウィジェットを配置することのできるウィジェットです。
画面中央にウィジェットを配置できる Center
と組み合わせて2つのテキストを次のようなコードで画面中央に配置しようとしたところ、画面上部に表示されてしまいました。
ちなみにColumn
でラップしないときは中央に表示されます。
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Text("Hoge"),
Text("Fuga"),
],
),
),
);
}
調べてみたところ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),),
],
),
),
);
}
無事Columnのコンテンツが中央に表示されました。