Flutter - Resizing Cachednetworkimage with memCacheHeight using mediaquery calculation does not work

83 views Asked by At

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?

enter image description here

0

There are 0 answers