Flutterメモ-20 (CenterウィジェットとColumnウィジェットで中央表示）

概要
参考情報

概要

Flutterを初め触っていた時に、パッと理解できなかったのが

Centerウィジェットの中にColumnウィジェットを入れた際の表示でした。

Centerウィジェットは、その名前の通り、childに指定したウィジェットを中央に表示してくれるものです。

例えば

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('hello world'),
        ),
      ),
    ),
  );
}

だと

f:id:gsf_zero1:20210930170819p:plain

というように狙ったとおりの表示をしてくれます。

んで、同じようにColumnウィジェットを使ってみると

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: const [
              Text('hello world'),
            ],
          ),
        ),
      ),
    ),
  );
}

f:id:gsf_zero1:20210930171107p:plain

なんでやねんって感じで、中央にあった文字列が一番上に行っちゃいます。

何故、このようになるのか？を知るために一旦 Column ウィジェットさんの背景色を変えてみます。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.yellow,
            child: Column(
              children: const [
                Text('hello world'),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

f:id:gsf_zero1:20210930171458p:plain

色付けてみるとよくわかりますね。Columnウィジェットさんは縦幅いっぱいまで自分の高さを確保しています。

なので、Centerウィジェットで包んでも中央にならないという訳です。

んで、この可能な限り縦幅を確保する挙動は、 mainAxisSize プロパティで制御できます。

デフォルトの値は MainAxisSize.max となっています。なので、可能な限り縦幅が確保されます。

逆に必要な分のみの確保で良い場合は、 MainAxisSize.min を指定します。

上記の状態に MainAxisSize の指定をつけると

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.yellow,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Text('hello world'),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

f:id:gsf_zero1:20210930171832p:plain

こうなります。ちゃんと中央に配置されるようになりました。

ちなみに、MainAxisSizeはデフォルト(max)のままで、MainAxisAlighmentで中央(center)を指定した場合は

import 'package:flutter/material.dart';

void main() {
  const _axisSize = MainAxisSize.max;
  const _axisAlign = MainAxisAlignment.center;

  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.yellow,
            child: Column(
              mainAxisSize: _axisSize,
              mainAxisAlignment: _axisAlign,
              children: const [
                Text('hello world'),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}