4

I don't know if the problem is in my code or in the ListView. Check out my Final(Edited) code here.

I'm working with pagination. When I reach the last page and scroll up/down the ListView the scrolling got laggy. I thought it might be happening because of this line. 

    leading: CircleAvatar(backgroundImage: NetworkImage(arrayOfProducts[index]['thumbnail'] ?? "")),

NetworkImage might be taking time to load the image. Not sure but I think the lag is being caused by it. So I added new package cached_network_image and changed my code to: 

    leading: CircleAvatar(child: CachedNetworkImage(
                      imageUrl: arrayOfProducts[index]['thumbnail'] ?? "",
                      placeholder: new CircularProgressIndicator(),
                      errorWidget: new Icon(Icons.error),
                    )),

But it's still laggy and previous images are now being hidden while scrolling.

DevTard
  • 464
  • 3
  • 11
Govaadiyo
  • 5,644
  • 9
  • 43
  • 72
  • I am interested more in how many times the _callAPIToGetListOfData() method is called ? , could you please add this line print("Network call initiated"); to the very beginning of this method and start scrolling, It seams that you are calling set state for every scroll .this can explain why previous loaded images are hide when scrolling. – Saed Nabil Dec 19 '18 at 18:16
  • @SaedNabil - Only calls when satisfied (controller.position.extentAfter <= 0 && isPageLoading == false) this condition and also **arrayOfProducts.length < totalRecord** – Govaadiyo Dec 20 '18 at 09:00
  • I think this condition is the problem controller.position.extentAfter <= 0 as it turn true every time you are scrolling beyond the visible screen .I can not test it right now as I am outside. – Saed Nabil Dec 20 '18 at 14:54
  • But there is other condition too, not only controller.position.extentAfter <= 0. So damm sure and also debugged code too. _callAPIToGetListOfData calls once – Govaadiyo Dec 24 '18 at 12:06
  • I can not recreate the issue as I have no access to url,accessToken and paramDic in your post request if you are willing to provide these info it will be great – Saed Nabil Dec 24 '18 at 13:25
  • Sorry I can not disclose it but if you want then you can use what ever you have that has image in the response. Defiantly by my code you feel jerk effect. Might be something going wrong. – Govaadiyo Dec 26 '18 at 05:11
  • Check your `ListView` properties and try setting `addAutomaticKeepAlives` to `true` and `cacheExtent` to something bigger. – Niraj Niroula Jan 10 '19 at 16:10
  • Try FadeInImage.assetNetwork() with placeholder to ensure that is isn't network delay problem. – Tornike Kurdadze Jan 30 '19 at 07:20

1 Answers1

2

This is currently a known issue in Flutter when using images: Link to Issue.

DevTard
  • 464
  • 3
  • 11