Flutter: RowWidgetを画面中央に配置させたい

Question

以下の画像のように、RowWidgetの中に縦に2色配置したColumnWidgetを2つ配置することで、4色のブロックを作りました。

これらを画面中央に配置したくて以下のコードを書いたのですが、移動してくれません。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              Column(
                children: [
                  Container(color: Colors.blue, width: 100, height: 100),
                  Container(color: Colors.red, width: 100, height: 100),
                ],
              ),
              Column(
                children: [
                  Container(color: Colors.green, width: 100, height: 100),
                  Container(color: Colors.yellow, width: 100, height: 100),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CenterWidgetの入れ子にRowWidgetを配置すれば中央に移動すると思っていました。
初心者で恐縮ですが、ご教授いただきたいです。

Answer 1

RowやColumnが画面全体に広がっているためCenterが効いていないためだと思います。
RowとColumnにmainAxisSize: MainAxisSize.minを指定してあげれば、広がらなくなるので、中央になります。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(color: Colors.blue, width: 100, height: 100),
                  Container(color: Colors.red, width: 100, height: 100),
                ],
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(color: Colors.green, width: 100, height: 100),
                  Container(color: Colors.yellow, width: 100, height: 100),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

もしくは、RowとColumnにmainAxisAlignment: MainAxisAlignment.centerを指定して、RowやColumn内で位置を指定してあげても解決すると思います（この場合Centerウィジェットは不要です）
こちらの方が配置の仕方を色々指定できるのでよいかもしれません。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(color: Colors.blue, width: 100, height: 100),
                Container(color: Colors.red, width: 100, height: 100),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(color: Colors.green, width: 100, height: 100),
                Container(color: Colors.yellow, width: 100, height: 100),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Flutter基礎 – Column/Rowの色々な並べ方という記事が参考になると思います

Comments

[massanmesu]

popoboyさま
期待した挙動になりました。
少し気になったのですが、columnの親であるRowだけに`MainAxisAlignment.center`を定義すれば良いと思っていましたが、子であるcolumnにも同じ処理をする必要があるのですね。。。
その辺をもう少し調べてみます。

ありがとうございました。