64
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

FlutterでColumnのコンテンツを画面中央に配置する

Posted at

Columnは縦にウィジェットを配置することのできるウィジェットです。
画面中央にウィジェットを配置できる Center と組み合わせて2つのテキストを次のようなコードで画面中央に配置しようとしたところ、画面上部に表示されてしまいました。
ちなみにColumnでラップしないときは中央に表示されます。

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Text("Hoge"),
            Text("Fuga"),
          ],
        ),
      ),
    );
  }

調べてみたところStackOverflowによると、Columnはデフォルトで画面の最大の高さまで広がってしまうようです。
意図したように表示するためには次の例のようにmainAxisSizeMainAxisSize.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のコンテンツが中央に表示されました。

64
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
64
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?