I am trying to enlarge a list of network image cached from internet url.
I have a list view rendering it and trying to set the ratio of 6 items per page (scrollable). I estimated with MediaQuery to get the device height, I managed to see the width changing as i play around with the ratio, however, the height would not change. Upon increasing the height it will give me BoxConstraints has non-normalized height constraints error.
My code:
deviceHeight = MediaQuery.sizeOf(context).height;
deviceWidth = MediaQuery.sizeOf(context).width;
and with the device height and width,my listview is returning cards:
SingleChildScrollView(
padding: const EdgeInsets.only(bottom: 60),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: widget.resultLength,
itemBuilder: (context, index) {
if (widget.resultData[1]['ingredient_response'][index]
['count'] !=
0) {
final img = widget.resultData[1]['ingredient_response'][index]
['imgUrl'];
return Card(
child: ListTile(
leading: ConstrainedBox(
constraints: BoxConstraints(
minWidth: deviceWidth * 0.25,
minHeight: deviceHeight * 0.3,
),
child: CachedNetworkImage(
fit: BoxFit.contain,
memCacheHeight: (deviceHeight * 0.15).toInt(),
// height: (MediaQuery.sizeOf(context).height) * 0.3,
imageUrl: "$img",
progressIndicatorBuilder:
(context, url, downloadProgress) =>
CircularProgressIndicator(
value: downloadProgress.progress),
errorWidget: (context, url, error) =>
const Icon(Icons.error),
),
// Image.network('$img'),
),
title: Text(
widget.resultData[1]['ingredient_response'][index]
['ingredientName'],
style: const TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.w500,
),
),
subtitle: Text(
widget.resultData[1]['ingredient_response'][index]
['count']
.toString(),
style: const TextStyle(
fontSize: 20.0,
),
),
),
);
} else {
return const SizedBox(width: 0);
}
},
),
],
),
),
My main concerning area is the image part, where I try to configure with leading: ConstrainedBox details and CachedNetworkImage's memCacheHeight: (deviceHeight * 0.15).toInt(),
all to failed attempts. The width is able to change but height would not. My image shows as below where I want to increase size of each item to fit only 6-7 per page. What am i missing here?
