☝️

【Flutter】Columnの中でListView.builderを表示する方法

2022/07/31に公開

Columnの中でListView.builderを使いたい場面は多くあるので、それをまとめておきたいと思います。

shrinkWrap: trueを使う方法

Columnの中で、ListViewを使用すると、
【Failed assertion: line 1979 pos 12: 'hasSize'】というエラーに遭遇すると思います。
おそらく上記はListViewのサイズがわからないために出るエラーなので、調べてみるとExpandedやSizedBoxなどで囲み、高さを指定してやるとエラーが消えるという記事などが出てきました。
今回はExpandedやSizedBoxで囲んでもうまくいかなかったため、違う方法で対応しました。

ListView.builderにshrinkWrapプロパティをtrueにすることによってエラーが解消されます。
しかし、これだけではスクロールがうまくできなかったため、さらに追加でphysicsプロパティにNeverScrollableScrollPhysics()を設定すれば正常にスクロールすることができ、エラーもなくすことができました。

Column(
  children: [
    Container(
    width: double.infinity,
    alignment: Alignment.bottomRight,
    child: GestureDetector(
      onTap: () {
        Navigator.of(context).pop();
      },
      child: Icon(
        Icons.close,
        color: Colors.white,
        size: 40,
      ),
     ),
    ),
    SizedBox(
      height: 16.0,
    ),
    ListView.builder(
          shrinkWrap: true, //追加
     physics: NeverScrollableScrollPhysics(), //追加
     itemBuilder: (BuildContext context, int index) {
      return WeatherCard(
        cl: kBlue,
        mountain: items[index].name,
        time: "7/26 16:00",
        weatherIcon: Icons.cloud,
        tempo: "33℃",
        tempos: "最高 35.3℃ 最低 25.3℃",
        );
      },
      itemCount: items.length)
     ),
  ],
)

Discussion