flexible hight inside ListView.Builder

[bhanuka96]

Is it possible to use flexible height inside ListView?

Now, the image is not displayed. it should add height to display

CachedNetworkImage(
                  imageBuilder: (context, imageProvider) => Container(
                    width: width,
                    decoration: BoxDecoration(
                      border: Border.all(color: Palette.greyTextColor),
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                      image: DecorationImage(image: imageProvider, fit: BoxFit.cover),
                    ),
                  ),
                  placeholder: (context, url) => ///
                  errorWidget: (context, url, error) => ///
                  imageUrl: image,
                  fit: BoxFit.cover,
                ),

[renefloor]

Did you set a height to items in the listview itself?

[bhanuka96]

Thanks for quick reply. I need to show flexible height, If I added Image.network(image), it's working. flexible height not working with CachedNetworkImage

Full code

return ListView.builder(
                  padding: EdgeInsets.only(top: 68.19, left: 5, bottom: 5),
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                      return CachedNetworkImage(
                        imageBuilder: (context, imageProvider) => Container(
                          width: width,
                          // height: 200.0,
                          decoration: BoxDecoration(
                            border: Border.all(color: Palette.greyTextColor),
                            borderRadius: BorderRadius.all(Radius.circular(8.0)),
                            image: DecorationImage(image: imageProvider, fit: BoxFit.cover),
                          ),
                        ),
                        placeholder: (context, url) => Container(
                          width: width,
                          // height: 200.0,
                        ),
                        errorWidget: (context, url, error) => ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(8.0)),
                          child: Container(
                            decoration: BoxDecoration(
                              border: Border.all(color: Palette.greyTextColor),
                              borderRadius: BorderRadius.all(Radius.circular(8.0)),
                            ),
                            child: Image.asset(
                              'assets/img_not_available.jpeg',
                              width: width,
                              // height: 200.0,
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        imageUrl: snapshot.data[index].image,
                        fit: BoxFit.cover,
                      );
                  });

[bhanuka96]

@renefloor can I know is it possible or not using CachedNetworkImage?

[renefloor]

I'm not sure, I've never needed it myself, so I'll have to test something myself. I can imagine it is not working because the image and placeholder/error widgets are placed on a stack.

[bhanuka96]

the issue was DecorationImage. without issuing this, it's working.

imageBuilder: (context, imageProvider) => Container(
                          width: width,
                          decoration: BoxDecoration(
                            border: Border.all(color: Palette.greyTextColor),
                            borderRadius: BorderRadius.all(Radius.circular(8.0)),
                            image: DecorationImage(image: imageProvider, fit: BoxFit.cover),
                          ),
                        ),

but another issue is, without using imageBuilder. we can't add border and borderRadius. Currently, I used ClipRRect widget. but border color is not good with ClipRRect

[renefloor]

Is that because of the height?

[pppshiwen]

same issue

[bebalance]

same issue