【Flutter】Centerの使い方｜Columnを画面中央に表示する

2023年10月23日2024年2月6日

「ウィジェットを中央に表示したい」

こんな時に便利なのが Center ウィジェットです。

Centerを使用することで任意のウィジェットを親ウィジェットの中央に表示できます。またColumnやRowをcrossAxisAlignmentプロパティを使用せず中央に表示することもできます。

それではCenterの基本的な使い方とColumnを中央に表示させる方法について解説していきます！

基本的な使い方

Centerの基本的な使い方について解説します。

使い方はシンプルで中央に表示させたいウィジェットをCenterのchildプロパティに渡すだけです。

Center(
  child: Container(
    height: 200,
    width: 200,
    color: Colors.amber,
  ),
),

画像のサンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false,
      ),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          color: Colors.amber,
        ),
      ),
    );
  }
}

Columnを水平方向に対して中央表示させる

Columnを水平方向に対して中央表示させる方法にcrossAxisAlignmentプロパティの引数にCrossAxisAlignment.centerを渡す方法があります。

しかしながらColumnの要素の横幅が画面いっぱいに広がっていないと画面中央に表示されず、SizedBoxのwidthプロパティにdouble.infinityを渡すなどして調整する必要があり面倒です。

結論としてはCenterでColumnをラップしてあげるのが一番楽にできます。

Center(
  child: Column(
    children: [
      Container(
        height: 100,
        width: 100,
        color: Colors.red,
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.amber,
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.blue,
      ),
    ],
  ),