【Flutterやろうよ！】初級編 その２〜横並び〜

こんにちは。
Flutter普及記事続きを書いていきたいと思います。
前回はこちら

qkuronekop.hatenablog.jp

本日は要素を横に並べていく方法について書きたいと思います。 基本的にはColumn()と一緒です。 横に並べるにはRow()を使います。

Row(
          children: [
            ColoredBox(
              color: Colors.redAccent,
              child: Text('１行目'),
            ),
            ColoredBox(
              color: Colors.orange,
              child: Text('２行目'),
            ),
            ColoredBox(
              color: Colors.blue,
              child: Text('３行目'),
            ),
          ],
        )

Row()

Column()同様に、MainAxisAlignment.centerで中央にMainAxisAlignment.endで右よせできます。
MainAxisAlignment.spaceBetween、MainAxisAlignment.spaceEvenly、MainAxisAlignment.spaceAroundも同様の効果があります。

spaceBetween

これはspaceBetween。

spaceEvenly

これはspaceEvenly。

spaceAround

これはspaceAround。

この辺をうまく使っていい感じのUIが作れるといいですね。

今、色の付いている部分がRow()の子要素なのですが、子要素の大きさはテキストの文字長と同じ大きさになっていますね。
これを親の要素の大きさに合わせて広げてみます。

Row(
          children: [
            Expanded(
                child: ColoredBox(
              color: Colors.redAccent,
              child: Text('１行目'),
            )),
            Expanded(
                child: ColoredBox(
              color: Colors.orange,
              child: Text('２行目'),
            )),
            Expanded(
                child: ColoredBox(
              color: Colors.blue,
              child: Text('３行目'),
            )),
          ],
        )

Exoanded

黄色の部分(親要素)が見えなくなり、赤、オレンジ、青の要素が画面いっぱいに広がりましたね。
Expanded()を使うと親ウィジェット内で利用可能なすべての空き領域を埋めてくれます。
3つある子要素全てをExpanded()にしたので３つ全てが等間隔に広がりましたが、１つだけをExpanded()にするとこんな感じでExpanded()した要素だけが空き空間を埋めます。

Row(
          children: [
            Expanded(child: ColoredBox(
              color: Colors.redAccent,
              child: Text('１行目'),
            )),
            ColoredBox(
              color: Colors.orange,
              child: Text('２行目'),
            ),
            ColoredBox(
              color: Colors.blue,
              child: Text('３行目'),
            ),
          ],
        )

Expandedの効果

まとめ

本日は、Row()とExpanded()```について書きました。 ```Column()```の子要素でもExpanded()```は同じ効果を縦方向に対して発揮します。
この辺をうまく使っていい感じのUIを作ってくださいね！
それでは、次回はスクロールについて書いていきたいと思います。

最後に、スクショのタイトルが「縦並び」のままになってしまっていますが、撮り直すのが面倒なのでこのままにします。
「基本の横並び」に読み替えてください。