【これで解決！】Columnの中にListViewを入れると起きるあの忌まわしきエラーを必ず直す方法とは？

Dart

2020.07.16

概要

どうも、@daiki1003です！

Flutterエンジニアだと必ず通るのではないかと言う、あの忌まわしきエラー。
そう、

Vertical viewport was given unbounded height.

または

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

こいつらです。
この記事は、あなたをこの問題から必ず救い出します！

うんうん、わかりますよ。

ググって出てきた記事を見てみたら、

ExpandedかFlexibleでラップすればいけるよ！

って出て来て言われた通りにラップしたけど直らん！
shrinkWrap？スクロールしたいんだから使えん！

そんな感じで過去の僕も悩んでました笑

Columnの中にListViewを入れて正しく表示する方法

本当は、スクロールしない場合はshrinkWrapで…みたいに全パターンを網羅したいのですが、
長くなるので今度書こうと思います。

さて、ExpandedやFlexibleでラップしても出来ないと嘆いているあなたにこの質問を捧げます。

そのListView、Columnの入れ子になっていませんか？

以下の様な場合を考えます。

>
Column(
  children: <Widget>[
    HogeContainer(),
    Column(
      children: <Widget>[
        FugaContainer(),
        ListView.builder(
          itemCount: models.length,
          itemBuilder: (ctx, index) => ModelItem(models[index]),
        ),
      ],
    ),
  ],
);

この様になっている場合、巷で言われている解決方法
【ListViewをExtended/Flexibleでラップする】
を純粋にやっただけでは解決できません。

じゃぁどうやってColumnの中にListViewを表示するの？

正解はこうです。

>
Column(
  children: <Widget>[
    HogeContainer(),
    Expanded(                        // ここにもExpanded
      child: Column(
        children: <Widget>[
          FugaContainer(),
          Expanded(
            child: ListView.builder(
              itemCount: models.length,
              itemBuilder: (ctx, index) => ModelItem(models[index]),
            ),
          ),
        ),
      ],
    ),
  ],
);

どうですか、解決しませんか？

誰かのお役に立てば。