【Flutter】ColumnでListViewがスクロールできない時の対処法

Columnの要素としてListViewを格納したらエラー「Vertical viewport was given unbounded height.」が発生し、スクロールできない場合の対処法を紹介します。

これから紹介する対処法にはExpandedFlexibleSizedBoxの3つがあります。

\ 世界最大級のオンライン学習サービス /

目次

エラーが発生するコード

Column(
  children: [
    Container(
      height: 100,
      color: Colors.lightBlue,
    ),
    ListView.builder(
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(10.0),
          child: Text(
            'item $index',
            style: TextStyle(fontSize: 20),
          ),
        );
      },
    ),
  ],
);

上記コードのようにColumnchildrenに直接ListViewを要素として渡す場合は「Vertical viewport was given unbounded height.」とエラーが発生します。

「unbounded height」とはColumnの要素がどれくらいの範囲(高さ)を必要とするか分からないことを意味します。よってエラーを解消するためにExpandedのようなレイアウト系Widgetを使用していきます。

Expandedでエラー対処

Column(
  children: [
    Container(
      height: 100,
      color: Colors.lightBlue,
    ),
    Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(10.0),
            child: Text(
              'item $index',
              style: TextStyle(fontSize: 20),
            ),
          );
        },
      ),
    ),
  ],
);

1つ目の対処法はExpandedListViewをラップする方法です。

ExpandedでラップされたWidgetは余白スペース全体に広がります。

Flexibleでエラー対処

Column(
  children: [
    Container(
      height: 100,
      color: Colors.lightBlue,
    ),
    Flexible(
      child: ListView.builder(
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(10.0),
            child: Text(
              'item $index',
              style: TextStyle(fontSize: 20),
            ),
          );
        },
      ),
    ),
  ],
);

2つ目の対処法はFlexibleListViewをラップする方法です。

ListViewまたはColumnの要素ごとに範囲を割合で指定したい場合に使用します。

SizedBoxでエラー対処

Column(
  children: [
    Container(
      height: 100,
      color: Colors.lightBlue,
    ),
    SizedBox(
      height: 400,
      child: ListView.builder(
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(10.0),
            child: Text(
              'item $index',
              style: TextStyle(fontSize: 20),
            ),
          );
        },
      ),
    ),
  ],
);

3つ目の対処法はSizedBoxListViewをラップする方法です。

ListViewColumnの範囲内に収まるようSizedBoxで高さを指定します。

一緒に読みたい

参考

  • URLをコピーしました!
目次