☝️
【Flutter】Columnの中でListView.builderを表示する方法
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