【Flutterやろうよ！】初級編　その１〜縦に並べる〜

こんにちは。
最近、Flutter流行ってきてるなぁと思う今日この頃です。
私自身はそろそろFlutterのお仕事を始めて3年くらいになります。

最近はブログなんかのドキュメントも充実し始めているかと思いますが、日本語のFlutter記事の普及に貢献したいと思いますので、私もFlutterに関する事をぼちぼち書いていこうと思います。

初級編と題しまして、簡単なUIから始めていこうかと思います。
これを機にFlutter使ってみたいと思う人が増えてくれると嬉しいです。

まずは初級編その１の前にFlutterで文字を表示するWidgetにText()というものがあります。

Text()は第一引数に表示したい文字(String)を渡します。

Text('aaaaa')

こんな感じです。

これを縦に並べるにはColumn()というWidgetを使います。

Column(
        children: [
          Text('１行目'),
          Text('２行目'),
          Text('３行目'),
        ],
      )

childrenにはList<Widgte>を渡してあげます。
ちなみに、他の言語にもあるかと思いますが、引数を名前付きで渡せるこの機能を「名前付き引数」と言います。
そのままですね。
これを使うと順番を必ずしも呼び出し元と同じ順番にしなくても大丈夫なんですよ。
便利ですね。

そんなこんなでこの様に縦並びのUIができました。

この画面全体のコードはこうなります。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('基本の縦並び'),),
      body: const Column(
        children: [
          Text('１行目'),
          Text('２行目'),
          Text('３行目'),
        ],
      ),
    );
  }
}

Scaffold()は画面の一番上のWidgetです。
Scaffold()にはAppBar()(一番上のヘッダーの部分)やFloatingActionButton()(flutterのサンプルコードにあるような右下のボタン)、BottomSheet()(画面下に固定されるUI)などの便利な機能がありますので、画面の一番上に置いておく事をおすすめします。
Scaffold()のbodyはAppBarから下の部分です。

ここに画面の中身を書いていきます。

Column()にはこの縦並びのリストをどう表示させるかという命令を与える事ができます。

MainAxisAlignment

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('１行目'),
          Text('２行目'),
          Text('３行目'),
        ],
      )

こんな風にmainAxisAlignmentに引数を渡すと縦方向にどこに表示させるか指定できます。
DefaultはMainAxisAlignment.startです。

Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Text('１行目'),
          Text('２行目'),
          Text('３行目'),
        ],
      )

Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('１行目'),
            Text('２行目'),
            Text('３行目'),
          ],
        )

要素の間に等間隔のスペースが開きます。

Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text('１行目'),
            Text('２行目'),
            Text('３行目'),
          ],
        )

要素の上下に等間隔のスペースが開きます。

Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('１行目'),
            Text('２行目'),
            Text('３行目'),
          ],
        )

全てのスペースが等間隔に開きます。

この辺をうまく使いこなせる様になるといい感じのUIができるようになると思います！

MainAxisSize

Column(
        mainAxisAlignment: MainAxisAlignment.end,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('１行目'),
          Text('２行目'),
          Text('３行目'),
        ],
      )

mainAxisSizeはColumn()の縦方向の大きさを設定できます。
DefaultはMainAxisSize.maxです。
MainAxisSize.maxは画面の空いているサイズいっぱいになっているのに対してminにすると、要素分のサイズになります。

Column()のサイズが中身の要素分しかなくなってしまったので、MainAxisAlignment.end,にしても画面の下部に表示されず、上部に表示されていますね。

わかりやすく色をつけてみました。
赤色の部分がColumn()の範囲です。

CrossAxisAlignment

CrossAxisAlignmentは横方向のどこへ表示するかという設定です。
Column()の横方向は要素の最大サイズになっています。
これを画面の端まで広げるには親の要素で画面いっぱいという設定をしてあげるというのが一つの手法です。

Container(
        width: double.infinity,
        color: Colors.yellow,
        child: const Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            ColoredBox(
              color: Colors.redAccent,
              child: Text('１行目'),
            ),
            ColoredBox(
              color: Colors.orange,
              child: Text('２行目'),
            ),
            ColoredBox(
              color: Colors.blue,
              child: Text('３行目'),
            ),
          ],
        ),
      )

この様に親の要素で画面いっぱいに広げてあげる事ができます。
黄色の部分がColum()の大きさです。

Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            ColoredBox(
              color: Colors.redAccent,
              child: Text('１行目'),
            ),
            ColoredBox(
              color: Colors.orange,
              child: Text('２行目'),
            ),
            ColoredBox(
              color: Colors.blue,
              child: Text('３行目'),
            ),
          ],
        )

CrossAxisAlignment.start,を設定する事で要素を左よせできます。
同様にCrossAxisAlignment.centerで中央にCrossAxisAlignment.endで右寄せにできます。
DefaultはCrossAxisAlignment.centerです。