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

Dart

概要

どうも、@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]),
            ),
          ),
        ),
      ],
    ),
  ],
);

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

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!

コメント

タイトルとURLをコピーしました