How to use ListView and fetch data at the same time in flutter?

Question

I am working on a flutter application where I want to implement the following functionality- Using a REST API (from Spring Boot backend server), fetch the data from the internet and show it in a list view. Now, we can use multiple approaches here-

Fetch all the data at once using a single call to the REST API and then create listview with all the data fetched (say 100 items) (using ListView.builder).
Fetch some data at once (say 10 items), create the list view with it and while the user scrolls through that list, fetch the next items of the list and add them to the list (Use a loading indicator at the end of list to show that data is being loaded. (like we generally see on Social Media apps or News apps)

I know, how to fetch all the data at once, but now I want to use the second approach. Can somebody explain how this can be achieved?

You need use pagination to achieve the second problem. You need to pass per_page & page_number while fetching API , the keys may vary based on your api implementation. ONCE YOU ARE DONE WITH THIS, attach a scrollcontroller to listview and a listener to thaat scrollcontroller . if controller is scrolled to max extent, call again API by updating page number and populate the data — Prashant, Jan 31 '23 at 09:12
https://www.kindacode.com/article/flutter-listview-pagination-load-more/ — MANISH DAYMA, Jan 31 '23 at 09:18
@ManishDayma I referred https://www.kindacode.com/article/flutter-listview-pagination-load-more/ Can you tell what should I do if there are some preceding widgets before listview on the page? How to decide the extent then? — ayush, Feb 12 '23 at 07:26

score 1 · Accepted Answer · answered Jan 31 '23 at 11:36

The concept you are describing in your question is commonly referred to as Lazy Loading.

To have a lazy loading functionality inside a flutter ListView there are probably two main approaches you could take.

You could for example use a predefined package with does that for you and is configurable like infinite_scroll_pagination

Otherwise you can also write a lazy loading functionality by yourself. This depends mainly on your usecases and preferences. I'll briefly summarize how that would work.

Your ListView can have a ScrollController. As you can see in the documentation it is possible to find out the current scroll position of the ListView with this controller.

You can add a listener to your scrollController and if the scroll position exceeds a certain threshold you simply fire request to your server which response then populates your list.

A listener could be a simple function for example:

scrollController.addListener(_scrollListener);

void _scrollListener() {
    if (controller.position.extentAfter < 500) {
      // Send your request
      // State change for loading animation
      // State change and add server response to your list
  }
}

As you can see the crucial point in that case is the extentAfter. This indicates that our remaining scroll space is lower than 500 therefore we want to trigger a server request to further populate our ListView.

Remember to remove your listener in case you dispose you widget.

If you do not want to use a ScrollController you could also use a ScrollNotification and a NotificationListener. You can read more about it in this answer or in the flutter docs. To give a small example:

NotificationListener<ScrollNotification>(
  child: ListView.builder(
    itemCount: // your dynamic item count
    itemBuilder: (BuildContext context, int index) {
      // return Your items
    },
  ),
  onNotification: (ScrollNotification scrollInfo) {
    if (scrollInfo.metrics.extentAfter < 500) {
      // Do your lazy loading stuff
    }
  },
);

What approach you want to take basically depends on you and your needs.

How to use ListView and fetch data at the same time in flutter?

1 Answers1