【Flutter】Expandedの使い方

今回はExpandedの使い方について解説していきます。

対象読者

○Flutter初学者
○Expandedの基本的な使い方を学びたい人

上記の方におすすめです。

では、解説していきます。

公式

公式ドキュメント
https://api.flutter.dev/flutter/widgets/Expanded-class.html

公式Youtube

Expandedとは

ExpandedはRow、Column、Flexの子要素を主軸に沿って可能な限り最大限の拡張してくれるWidgetです。

例えば下記のようなサンプルを見てみると、

main.dart

Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Container(
              color: Colors.amber,
              width: 100,
              height: 100,
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),

こんな感じで三つのContainerが並んでいます。 下に空白があり、この部分を埋めたいところですが、決め打ちで`height:○○`と指定すると他の端末だとレイアウトが崩れてしまう可能性があります。

そこでExpandedを使用します。
例えば、真ん中のContainerにExpandedを指定すると、

Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                width: 100,
                height: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),

こんな感じで引き伸ばしてくれます。

可能な限り最大限の拡張してくれるWidgetです。

「いやさっきこんなこと言ってたじゃん！なんで横は拡張してくれないの？」と思った人もいるかもしれませんが、Expandedは主軸に沿って可能な限り拡張してくれるため、先ほどのコードでは横は拡張されません。

例えば先ほどのコードのColumn部分をRowに変更すると、

Center(
        child: Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                width: 100,
                height: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),

こんな感じで横幅を最大限まで拡張してくれます。

Column → 列
Row → 行

flexを指定して優先順位を決める

Expandedにはflexというプロパティがあります。
flexは複数の子要素にExpandedを指定したときに、それぞれの優先順位をつけることができます。

例えば、下記のように書くと、

Row(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.blue,
                height: 100,
                child: const Text('1'),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.amber,
                height: 100,
                width: 50,
                child: const Text('2'),
              ),
            ),
            Expanded(
              flex: 3,
              child: Container(
                color: Colors.blue,
                height: 100,
                child: const Text('3'),
              ),
            ),
          ],
        ),

こんな感じでExpandedを指定した分だけ拡張してくれます。
上記の例では、横幅を6分割して、それぞれflexを指定した分だけ拡大しているイメージですかね。これを使えばレイアウトが作りやすくなりそうです。

感想

いつもなんとなくで使っていたExpandedの使い方の整理できてよかったです。
どなたかの役に立てれば嬉しいです。