【Flutter】Expandedの使い方


今回は**Expanded**の使い方について解説していきます。
## 対象読者
○Flutter初学者
○Expandedの基本的な使い方を学びたい人

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

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

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

**公式Youtube**

https://www.youtube.com/watch?v=_rnZaagadyo&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=4

## 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,
            ),
          ],
        ),
      ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/ebef6896-e8e2-93a6-c7d7-ce82ab255f1e.png' width='300'>
こんな感じで三つのContainerが並んでいます。
下に空白があり、この部分を埋めたいところですが、決め打ちで`height:○○`と指定すると他の端末だとレイアウトが崩れてしまう可能性があります。

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

```dart
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,
            ),
          ],
        ),
      ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/1325c2ef-2974-3465-b31c-17e717169b61.png' width='300'>

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

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

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

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

```dart
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,
            ),
          ],
        ),
      ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/4f09d5db-7b2e-03a3-3e31-7767e505d47f.png' width='300'>

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

**Column → 列**
**Row → 行**

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

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

```dart
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'),
              ),
            ),
          ],
        ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/af04b8c7-a1dc-7465-ee3d-f89479bba4d8.png' width='300'>

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

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