Syncronous Image load in list view builder

  1. Summary of my problem
  • Details about my goal
    Hi guys, need some help. i have some product list is built in listview builder. i have using lazy load to pagin and load more after 1/4 of screen scroll. the problem is image is not load also whn list is build but is loaded when we show the card.

  • Expected Results
    Load image directly when list is build, so when next page was loaded it was loaded with image and not gonna show loading for the image

  • Actual Results
    There is any loading because image was loading after we show the card/item in screen

  • Error Messages (if any)

  1. What have I tried so far -
  2. Here’s the minimum code you would need to reproduce the problem -

Example code of my list view builder:

 Flexible(
          fit: FlexFit.tight,
          child: NotificationListener<ScrollNotification>(
            onNotification: (notif) => handleScrollNotification(model, notif),
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: model.promotionsData.nextPage != null
                  ? model.promotions.length + 1
                  : model.promotions.length,
              itemBuilder: (ctx, i) => model.promotions.length == i
                  ? loadingIndicator()
                  : PromotionCard(
                      promotionModel: model.promotions[i],
                    ),
            ),
          ),
        ),

i use the NotificationListener to reach the scroll and load more data:

if (!model.onLoadNextPage &&
        _scrollNotification.metrics.pixels >=
            _scrollNotification.metrics.maxScrollExtent * .45) {
      model.nextPage();
    }

Here is my PromotionCard

class PromotionCard extends StatelessWidget {
  final PromotionModel promotionModel;
  const PromotionCard({@required this.promotionModel});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: lightBgColor,
      height: 375,
      width: MediaQuery.of(context).size.width,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          PromoCardHeader(),
          Flexible(
            fit: FlexFit.tight,
            child: Container(
          height: 165,
          width: 165,
          child: CachedNetworkImage(
            imageUrl: imageUrl,
            placeholder: (context, url) => CustomSkeleton(
              child: Container(
                decoration: BoxDecoration(
                  boxShadow: [shadow(Colors.grey[350])],
                  borderRadius: BorderRadius.circular(8),
                  color: Colors.grey[300],
                ),
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
              ),
            ),
          ),
        ),
          )
        ],
      ),
    );
  }
}

I have use the CachedNetworkImage but still not load the image when the list builder re render on new list is comming after scroll, so is shown some loading to load an image.

the Goal is how to make sure the image was downloaded for the next/load more data when scroll. so no loading anymore in the bottom of list view when scrolling.

Some demo:

if you can see, on the first data was load and image is there for first load. and when the scroll actualy the data was there but the image is not being dowload yet so when we scroll there is image download process and i don’t want it.

Tengs for help

Hello and welcome,

could you please provide a minimum reproducible example of the code you are using to create and display the listview and the next page? It would greatly help in helping you.

tengs sir, i have update my question. @patrick_dm