【Flutter】ウィジェットを左右に並べ、上下左右の配置を変更する

　今回のゴール

・テキストなどを配置し、その位置を変更できるようになる
・左右への寄せ方、上下への寄せ方を知る

【プログラムの構成】

本プログラムは以下のように配置することで縦にそれぞれの内容を並べています。

home:Scaffold ー body:Column ー Container - Row(中央寄せ)
　　　　　　　　　　　　　　ー Container - Row(下寄せ)
　　　　　　　　　　　　　　ー Container - Row(均等配置)
　　　　　　　　　　　　　　ー・・・

【上下の配置方法】

Containerを記述後、Row内で"crossAxisAlignment"で"center"などを指定することで上下、中央について指定できます。

Container(
  width: double.infinity,
  height: 60,
  color: Colors.grey[200],
  child: Row(
    //mainAxisではなくcrossAxisにすることで上下についての指定になる
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(color: Colors.red, child: Text('****')),
      Container(color: Colors.blue, child: Text('上寄せ')),
      Container(color: Colors.green, child: Text('----')),
    ],
  ),
),

【左右の配置方法】

Containerを記述後、Row内で"mainAxisAlignment"で"start"などを指定することで上下、中央について指定できます。

Container(
  width: double.infinity,
  height: 60,
  color: Colors.grey[200],
  child: Row(
    //endを指定することで、左右におけるendとうことで右寄せになる
    //startを指定すれば左になる
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Container(color: Colors.red, child: Text('****')),
      Container(color: Colors.blue, child: Text('右寄せ')),
      Container(color: Colors.green, child: Text('----')),
    ],
  ),
),

【完成図とコード】

f:id:moun45:20220319141859p:plain

f:id:moun45:20220319120936p:plain

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 60,
              color: Colors.grey[200],
              child: Row(
                children: <Widget>[
                  Container(color: Colors.red, child: Text('first')),
                  Container(color: Colors.blue, child: Text('second')),
                  Container(color: Colors.green, child: Text('third')),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              child: Row(
                //mainAxisでcenterを指定することで中央寄せになる
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(color: Colors.red, child: Text('****')),
                  Container(color: Colors.blue, child: Text('中央寄せ')),
                  Container(color: Colors.green, child: Text('----')),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              color: Colors.grey[200],
              child: Row(
                //endを指定することで、左右におけるendとうことで右寄せになる
                //startを指定すれば左になる
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Container(color: Colors.red, child: Text('****')),
                  Container(color: Colors.blue, child: Text('右寄せ')),
                  Container(color: Colors.green, child: Text('----')),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              child: Row(
                //均等に配置
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(color: Colors.red, child: Text('****')),
                  Container(color: Colors.blue, child: Text('均等配置')),
                  Container(color: Colors.green, child: Text('----')),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              color: Colors.grey[200],
              child: Row(
                //mainAxisではなくcrossAxisにすることで上下についての指定になる
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(color: Colors.red, child: Text('****')),
                  Container(color: Colors.blue, child: Text('上寄せ')),
                  Container(color: Colors.green, child: Text('----')),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(color: Colors.red, child: Text('****')),
                  Container(color: Colors.blue, child: Text('下寄せ')),
                  Container(color: Colors.green, child: Text('----')),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              color: Colors.grey[200],
              child: Row(
                //mainとcrossを両方指定することで右と下への配置ができる
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(color: Colors.red, child: Text('****')),
                  Container(color: Colors.blue, child: Text('右下寄せ')),
                  Container(color: Colors.green, child: Text('----')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}