【Flutter】超簡単！要素を画面いっぱいに表示する方法【Expanded】

#この記事を読んで習得できること
Flutterの画面作成で「画面いっぱいに要素を表示したい」っていう問題を解決する力（多分）

#結論
・`Expanded`を使って要素を隙間いっぱいに大きくする
#こんな感じ
![スクリーンショット 2020-08-14 15.14.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389553/74f6e974-c974-be98-40e8-216eea3d2469.png)


#とりあえず、書いてみる

```main.dart
class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.blueAccent),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
        ],
      ),
    );
      ),
    );
  }
}
```

![スクリーンショット 2020-08-14 15.00.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389553/ebb42073-52f6-2920-42fb-d3ede9df71f7.png)

🥺

要素が吹っ飛んでしまった。
これは、高さが何も指定されてないためであり、仕方がないこと。


#高さを指定してみる
なので、heightをContainerにつけてみる。

```main.dart
class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Container(
          decoration: BoxDecoration(color: Colors.blueAccent),
          height: 300,
        ),
        Container(
          decoration: BoxDecoration(color: Colors.greenAccent),
          height: 300,
        ),
      ],
    ));
  }
}
```
![スクリーンショット 2020-08-14 15.05.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389553/5746c17b-a0d8-aff7-fd84-deef32cc0656.png)

Containerが表示されるようになったが、高さ指定をしてしまっているので、
これだと不都合がことが起きる。

#青いContainerを画面いっぱいに引き伸ばしてみる
上での問題を解消するために、Containerを`Expanded`で囲ってみる。

```main.dart
class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 200,
          ),
        ],
      ),
    );
  }
}
```
![スクリーンショット 2020-08-14 15.19.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389553/07024e34-b226-6d48-7373-1829fdcdf97a.png)

すると、いい感じに画面いっぱいに要素が表示されるようになる。
とりあえずやりたいことは終わり。

#Expandedを複数入れると均等に要素を広げてくれる
一番上の画像のような要素表示は、以下のソースで行ってくれた。

```main.dart
class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.orangeAccent),
            height: 100,
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.yellowAccent),
            ),
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 100,
          ),
        ],
      ),
    );
  }
}
```

複数の`Expanded`が要素内にあると、それらが均等の大きさになるように自動で調整してくれる。
こういうところが、Flutterの好きなところなんだよなあ…
（他のをあまり知らない）

#最後に
この要素内に、Textとかを入れたりすると、要素の横幅がぶっ壊れてしまう。
これの解消方法はまた今度。

```main.dart
class _MainViewControllerState extends State<MainViewController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.orangeAccent),
            height: 100,
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.yellowAccent),
              child: Text("test"),
            ),
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(color: Colors.blueAccent),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
            height: 100,
          ),
        ],
      ),
    );
  }
}
```
![スクリーンショット 2020-08-14 15.27.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389553/b5584ff9-8170-1b29-81ff-ff61f0d6bb8d.png)

#ソース
https://github.com/taichi6930/flutterstudyapp/tree/develop