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(),
          ],
        ),
      ),
    );
  }
}

画像（エミュレータ）

画像（実機）

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の中で使ってはいけない。