Flutter - Loading paged JSON data into the ListView

In this episode, I cover building a infinite list view which loads paged data using a offset and limit. I mock a call that retrieves json and show how to update the list view.
I cover these points in the video:
- Fetch paged data using an offset & limit
- Display loading until the data is returned
- Decode JSON into a list of objects
- Scrolling will fetch more paged data
- Scrolling back will fetch cached data
Source code:
gist.github.co...
Source code fixes for Dart 2:
- In this source I explicitly cast.
- I change JSON.decode to new JsonCodec().decode
gist.github.co...
Something I don't cover in this episode, when the cached data grows, it could reach a size detrimental to the application. With this in mind, it could easily be remedied with logic that evicts data loaded in to the cache.

[@phokingnuts]

You make it seem way more complicated than it is. Also, maybe it would have been better just using one of the many json test APIs available online instead of "emulating" it.

[@karianpour]

Greate video. I am not sure, but I think when we speak about infinite list, we do not have offset rather we have to tell the server how far did we fetch the data and asking for more data. As you might know, doing offset in back end is kind of expensive job.

[@hassanbaiga]

Man where have you gone ? The new kids on youtube with flutter tutorials are with 2 steps. 1. Getting it started. 2. Deploy to appStore .. And i'm like, wait .. what did i miss ... Please come back on flutter series.

[@djamelbenali6883]

thank you sir

[@BrandonDonnelson]

Thanks for the feedback!. You're welcome.

[@videosuperhero100]

Really appreciate you making this! Couple questions, because I'm still on a quest to make the flutter_gallery example product work ( i really like the UI in the pesto section...please check it out) Just for my clarification, in your example gist, line 109, you set the _getTotal() to return 1000 when things are initialized. I guess my confusion, and correct me if I am wrong, is that it seems that this example is not "infinite" but is instead limited to 1000 records that theoretically could be known by the database returning that number. And so in this technique you are setting up the "foundation" for 1000 record placeholders, and then as you scroll it replaces the "loading text" that is first in the placeholder with the data incrementally as you scroll. Is this the only way to do infinite scrolling is to set the foundation first. Or is there a way to not know the foundation or record limit, and then keep appending data? I was just banging around the pesto area of the flutter_gallery example trying to do this...but failing because i'm not sure what I'm really doing. Thanks Brandon!

[@BrandonDonnelson]

Thank you. You're correct my example wasn't entirely infinite, although if I didn't know how many records there were, what I would do is set it to an arbitrary high number and if someone scrolled to the end of the records set, before the total was reached, I could change it and setState. So I wouldn't need to know when my database records set ended. But I would need to know when the end occurred on the request so I could control the end. I would also suggest asking how you would do it in the stack overflow, I hear they have some great responses in that channel for flutter as well.

[@videosuperhero100]

I've tried asking on there but don't seem to get responses. Is it possible to make another gist that is a modified version of your current one just to see how what you are saying is implemented?

[@videosuperhero100]

Another follow up, if a high arbitrary number is set, would that method have a weird effect on the acelleration of how people scroll and would it reserve excess memory or is that memory it would use arbitrary. Thanks Brandon!

[@BrandonDonnelson]

I can aim to get something worked up later when I get back.

[@videosuperhero100]

That would be sweet! And even better...in the context of the flutter_gallery example of the pest section! Dissecting that UI would be helpful and everybody is browsing it since its included in the flutter package everybody downloads. Also of note, I was able to use your demo and pull in data from my website "quasi-infinately" ;) ... so that was a good feeling! Thanks Brandon!

[@Hicham_SaAh]

i came from ionic 3 because i dont want to build a webapp and thank you so much ,this tutorial looks so awesome but it's broken my mind because this is so long way to fetch a json :( :(

[@EpicDotaMoments3890]

Thank for your sharing . I have a question , I'm using Gridview to display items with crossAxisCount , how can I set background image each row

[@BrandonDonnelson]

This might work for you, setting a background image for the item. stackoverflow.com/questions/44179889/flutter-sdk-set-background-image.

[@BrandonDonnelson]

Thanks for the feedback!

[@EpicDotaMoments3890]

Thanks for your answer , this is my question stackoverflow.com/questions/49525422/how-can-set-background-image-each-row-gridview I tried as above your answer but working unexpected

[@BrandonDonnelson]

I'm not able to help at the moment, could you formulate a question and post to Stack under the flutter tag?

[@BrandonDonnelson]

Never mind, I see you posted it. Nice work!

[@vidorvistrom5299]

It throws an error in getDatas method It says "Unhandled exception: type 'List' is not a subtype of type 'List'" at List list=JSON.decode(json)

[@ironshark2861]

change List list = JSON.decode(json); to List list = new JsonCodec().decode(orderJson).cast();

[@jairw4084]

What's the best practice for Streambuilder and Futurebuilder, I don't know what is suitable situation to use them.

[@BrandonDonnelson]

I like using the future builder when I want to build a widget in the future after I do some queries or dependent calls. The stream builder is more specific than a future builder and could be used with streams. For instance the cloud firestore snapshots stream. There's more than one way to do the same thing here. I think overall goal is, would it help tell the codes story, or is useful at the time it's great to use. This might be a great question for stack overflow as well.

[@videosuperhero100]

Hows the video for the flutter_gallery pesto infinate scrolling json feed demo coming! Also quick tip....dart 2 messes things up for the json data conversion! eek

[@BrandonDonnelson]

I haven't been able to get to that yet, I had some others I wanted to do in the time I had first. Ah, bummer, I see what you mean the implicit casts no longer work, and the JSON constructor has been deprecated in replace of new JsonCodec().decode(json). I'll have to work up a follow up video for dart 2.

[@videosuperhero100]

yeah, i also noticed flutter.io/cookbook/networking/fetch-data/ example doesn't even have working code...further adding to frustration. But yes would love to get your take on converting pesto in the example or at least some code to pick through if you don't have time for a video...seriously been wrecking me for 2 weeks now....would be appreciated!

[@BrandonDonnelson]

I've made a dart 2 friendly version using explicit casting to correct for type safety. gist.github.com/branflake2267/31aa8a6ce9b2f4f3956c433e3acfb60d

[@videosuperhero100]

I'll check it out, thanks! btw if you have time i made a gist of the pesto section, and loaded in some json data. From here is where i am stuck on getting the infinite scrolling to work, if you have any comments would be appreciated! gist.github.com/mrbm/04a48bc9ad4fef8ddcc4b718f946a9a4

[@BrandonDonnelson]

Nice job!

[@gue_polos]

this code too complicated 4 me

[@kroketin]

Why didn't you use an http requisition like everyone else does? You just complicated what could be a simple thing to learn. Unfortunately, I wasted my time.

[@aayanshgerminate3861]

Wasted alot of time