【Flutter】ウィジェットを縦に並べ、上下寄せ・左右寄せをすることで配置を変える

　今回のゴール

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

【プログラムの構成】

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

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

【上下の配置方法】

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

Container(
  width: double.infinity,
  height: 60,
  child: Column(
    //mainAxisでcenterを指定することで中央寄せになる
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('***'),
      Text('中央寄せ'),
    ],
  ),
),

【左右の配置方法】

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

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

 

【完成図とコード】

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: Column(
                children: <Widget>[
                  Text('firstline'),
                  Text('secondline'),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              child: Column(
                //mainAxisでcenterを指定することで中央寄せになる
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('***'),
                  Text('中央寄せ'),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              color: Colors.grey[200],
              child: Column(
                //endを指定することで、上下におけるendとうことで下寄せになる
                //startを指定すれば上になる
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Text('***'),
                  Text('下寄せ'),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              child: Column(
                //均等に配置
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text('***'),
                  Text('均等に配置'),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              color: Colors.grey[200],
              child: Column(
                //mainAxisではなくcrossAxisにすることで左右についての指定になる
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('***'),
                  Text('左寄せ'),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text('***'),
                  Text('右寄せ'),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 60,
              color: Colors.grey[200],
              child: Column(
                //mainとcrossを両方指定することで右と下への配置ができる
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text('***'),
                  Text('右下寄せ'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

まとめ

以上が配置方法、寄せ方法になります。

今回はテキストで実施しましたが、ウィジェットの他のものを指定することで一気にアプリ開発の実装に近づくと思います。

【参考にしたサイト】

この記事のプログラムは以下のサイトを参考にしています。

www.flutter-study.dev