[Flutter] Center, Column, Row, Container のレイアウトWidget

レイアウトを整えるためのWidgetで基本的なものとして
Center, Column, Row, Container があります
使い方を確認しておきましょう

Layout Widget

デバイスの画面サイズは様々なので、基本は中央から上下左右に配置するような
レイアウト用のWidgetが用意されています

Center
- 中央配置
Column
- 縦配置
Row
- 横配置
Container
- 子Widgetの配置、色、サイズなどを個別にカスタマイズ

目次
1. Center
2. Column
3. Row
4. Container

Center

中央配置です

VScodeのテンプレートのEmpty Application でプロジェクトを作成すると Center が使われているので、それを見るとわかりやすいです

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: Scaffold(

body: Center(

child: Text('Hello World!'),

);

}

中央に Hello World! が表示されています

以降、この基本コードでそれぞれ確認してみましょう

Column

上のコードで、Centerの代わりにColumnを入れ
Textを３つ配置するために
chirldren: <Widget>[ ],
として変更します

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Text('Hello World!'),
            Text('Hello World!'),
            Text('Hello World!'),
          ],
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: Scaffold(

body: Column(

children: <Widget>[

Text('Hello World!'),

);

}

確かにTextは縦配置になりましたが、左上の隅によってしまいました

ここで、mainAxisAlignment を使って調整してみます
mainAxisAlignment はこの Column のケースでは縦軸方向でのアラインメントです

MainAxisAlignment.center を設定してみます

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello World!'),
              Text('Hello World!'),
              Text('Hello World!'),
            ],
          ),
        ),
    );
  }

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: Scaffold(

body: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text('Hello World!'),

);

}

確かに縦軸方向でセンターに配置されましたが
左に寄ったままです

Centerを使って中奥に寄せてみます
bodyをCenterにして、その子にColumnを設定します

@override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello World!'),
              Text('Hello World!'),
              Text('Hello World!'),
            ],
          ),
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: Scaffold(

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text('Hello World!'),

);

}

とりあえず見やすくなりました

Row

Rowを使って横配置をしてみます
Columnで使ったコードのColumnをRowに変えるだけです
みやすくするためにHello World! の後ににスペースを入れました

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello World!   '),
              Text('Hello World!   '),
              Text('Hello World!   '),
            ],
          ),
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: Scaffold(

body: Center(

child: Row(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text('Hello World! '),

);

}

横方向に３つTextが配置されました

Container

Container を上のColumnやRowの代わりに設定します
Container では縦横を指定しないと全画面になってしまいます

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            // color: Color.fromRGBO(200, 200, 200, 0.5),
            color: Colors.blue,
            width: 300.0,
            height: 300.0,
            child: const Text('Hello World!'),
          ),
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: Center(

child: Container(

// color: Color.fromRGBO(200, 200, 200, 0.5),

color: Colors.blue,

width: 300.0,

height: 300.0,

child: const Text('Hello World!'),

);

}

300×300のボックス領域を青で色付けしています
Textは左上に張り付いていますが、これはAlingmentを使うと改善されます

配色をARGBでも設定できるので背景色とText文字色も変更してみます

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Color.fromARGB(255, 188, 210, 228),
            width: 300.0,
            height: 300.0,
            alignment: Alignment.center,
            child: const Text(
              'Hello World!',
              style: TextStyle(
                fontSize: 32,
                color: Color.fromARGB(255, 5, 79, 139),
              ),
            ),
          ),
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: Center(

child: Container(

color: Color.fromARGB(255, 188, 210, 228),

width: 300.0,

height: 300.0,

alignment: Alignment.center,

child: const Text(

'Hello World!',

style: TextStyle(

fontSize: 32,

color: Color.fromARGB(255, 5, 79, 139),

);

}

このようになりました

　
　
　
References:
Center class
Column class
Row class
Container class
Alignment class
mainAxisAlignment