ExpandedはListViewの中で使ってはいけない

# Expanded

画面の両端を埋めるようにぺったり広げてくれるExpanded。
ただし、ExpandedはRow/Column/Flexの子以外で使ってはいけない。

# 登場人物一覧

人物というかウィジェット...

Column 縦にウィジェットを並べてくれる
Row　横にウィジェットを並べてくれる
ListView ウィジェットをリストで並べてくれる
Container 四角形を描画する
Text　文字を描画する
Divider 区切り線を描画する
SizedBox 余白を描画する



# 事象：消えたウィジェット
ListViewの中でExpandedを使ったところ、エミュレータでは動いたが、実機では表示されなかった。

コード：

```main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class Rect {
  Rect({this.title, this.color});
  String title;
  Color color;
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final List<Rect> myList = [
    Rect(title: "ウサギ", color: Colors.pink),
    Rect(title: "コアラ", color: Colors.grey),
    Rect(title: "パンダ", color: Colors.white),
    Rect(title: "ひよこ", color: Colors.yellow),
    Rect(title: "あざらし", color: Colors.green),
    Rect(title: "しまうま", color: Colors.pink),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("RowとListView"),
        ),
        body: Column(
          children: [
            Text('Expandedを使わないRow(Row->Container)'),
            Row(
              children: myList.map((obj) {
                debugPrint(obj.title);
                return Container(color: obj.color, child: Text(obj.title));
              }).toList(),
            ),
            Text('→画面の隙間を埋めたい'),
            SizedBox(height: 10),
            Divider(),
            Text('ExpandedのRowの使い方 (Row -> Expanded -> Container)'),
            Row(
              children: myList.map((obj) {
                return Expanded(
                    child: Container(color: obj.color, child: Text(obj.title)));
              }).toList(),
            ),
            Text('→Expandedを使うと画面の両端目一杯領域をとってくれる'),
            SizedBox(height: 10),
            Divider(),
            Text('参考：Expandedを使わないListView (ListView -> Container)'),
            Container(
              height: 20,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: myList.map((obj) {
                  return Container(color: obj.color, child: Text(obj.title));
                }).toList(),
              ),
            ),
            Text('→隙間が気になったとする'),
            SizedBox(height: 10),
            Divider(),
            Text('ListViewにExpandedを当てる (ListView -> Expanded -> Container)'),
            Container(
              height: 20,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: myList.map((obj) {
                  return Expanded(
                      child:
                          Container(color: obj.color, child: Text(obj.title)));
                }).toList(),
              ),
            ),
            Text('→広がらないし、実機で動かしたら消えてしまう'),
            SizedBox(height: 10),
            Divider(),
          ],
        ),
      ),
    );
  }
}

```

画像（エミュレータ）
<img width="400" alt="emu.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/86a2a154-8d60-1197-533b-d1ed386a1d5f.png">


画像（実機）
<img width="400" alt="real.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/9abca373-789e-18b6-b9d0-b0b3ee313dd7.png">


Expandedを当てたListView消えた！！



よく見るとデバッグコンソールに警告文が出ている。

```
════════ Exception caught by widgets library ═══════════════════════════════════
Incorrect use of ParentDataWidget.
════════════════════════════════════════════════════════════════════════════════
```


# そもそも...

ExpandedはRowもしくはColumn、flexの直下で実行するもの。

```
A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.
```
childが使用可能なスペースを埋めるために、Row、Column、またはFlexの子を拡張するウィジェット。
https://api.flutter.dev/flutter/widgets/Expanded-class.html

# 結論
短時間で試行錯誤しているとうっかりやってしまったりするが、
Expandedしたいとき、親はColumn/Row/Flexにして使うべし。
間違ってもListViewの中で使ってはいけない。