【Flutter】crossAxisAlignmentが効かない時の対処法

2023年1月2日2023年9月21日

こんにちは、フラメルです。

今回はColumnやRowなどでcrossAxisAlignmentが効かない時の対処法を紹介します。

対処法：クロス軸の横幅をいっぱいにする

ColumnでcrossAxisAlignmentを使用して要素の配置を指定する際、Columnの横幅が親要素に対して横幅いっぱいに広がっている必要があります。

よって下記コードのようにColumnの子要素にSizedBox(width: double.infinity)を追加して横幅いっぱいに広げるとcrossAxisAlignmentが効くようになります。

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    SizedBox(width: double.infinity),
    Container(
      width: 150,
      height: 150,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.yellow,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.blue,
    ),
  ],
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(width: double.infinity),
            Container(
              width: 150,
              height: 150,
              color: Colors.red,
            ),
            Container(
              width: 150,
              height: 150,
              color: Colors.yellow,
            ),
            Container(
              width: 150,
              height: 150,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

以上です。