I have a ListView that is displaying some items in a Card. The Card has CachedNetworkImage that is loading images from links that I scraped earlier from a website into a list. My problem is - at least I think - the ListView has 50- 100 items, and the requests to load the images are being sent to the server too fast because out of the 50-100 images, sometimes 10-20 or 30 will load, and the rest will return HTTP request failed, statusCode: 444. I am looking for a way to delay the requests, if only even for 200 milliseconds. I tried using FutureBuilder to delay, but when I print the time to monitor the speed of the request, they are all still being sent in a matter of a second. Thanks

     FutureBuilder(
       future: Future.delayed(Duration(milliseconds: 500)),
       builder:(c,s)=>
         ListView.builder(
            itemCount: 50,
            itemBuilder(context, index){
               return Card(
                  child: Row(
                     children: [
                        CachedNetworkImage(
                           imageUrl: imagesLink[index],
                        placeholder: (context, url) => CircularProgressIndicator(),
                        errorWidget: (context,url,error) => new Icon(Icons.error),
                      ),
                   ]
                ),
             );
          }
       )
     )


Solution 1: CoderUni

The api seems to be rate limiting your requests so you can't send them all at once. The problem with your approach is that it will only delay the Listview.builder() from displaying all your images. One approach would be to delay the showing of images one by one like this:

ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) {
        return FutureBuilder(
          future: Future.delayed(
              Duration(milliseconds: 50 * index)), // Adjust this to fit api
          builder: (_, __) => Card(
            child: Row(children: [
                 CachedNetworkImage(
                       imageUrl: imagesLink[index],
                    placeholder: (context, url) => CircularProgressIndicator(),
                    errorWidget: (context,url,error) => new Icon(Icons.error),
                  ),
            ]),
          ),
        );
      },
    );