Summary  
This chapter covers implementing pagination by fetching data in discrete pages and using a scroll listener to detect when to load the next page, tracking the current page and stopping when no more items remain to create a seamless infinite-scroll list.  

General domain of usage  
Social media news feeds

When you need to display large lists of data from an API, loading everything at once is rarely practical. APIs often provide **pagination**—a way to fetch data in chunks or "pages"—so your app only loads and displays a limited number of items at a time. This approach is essential for performance, usability, and network efficiency, especially when dealing with thousands of records.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7CmltcG9ydCAnZGFydDphc3luYyc7CmltcG9ydCAnZGFydDptYXRoJzsKCnZvaWQgbWFpbigpIHsKICBydW5BcHAoUGFnaW5hdGVkTGlzdEFwcCgpKTsKfQoKY2xhc3MgUGFnaW5hdGVkTGlzdEFwcCBleHRlbmRzIFN0YXRlbGVzc1dpZGdldCB7CiAgQG92ZXJyaWRlCiAgV2lkZ2V0IGJ1aWxkKEJ1aWxkQ29udGV4dCBjb250ZXh0KSB7CiAgICByZXR1cm4gTWF0ZXJpYWxBcHAoCiAgICAgIHRpdGxlOiAnUGFnaW5hdGlvbiBEZW1vJywKICAgICAgaG9tZTogUGFnaW5hdGVkTGlzdFNjcmVlbigpLAogICAgKTsKICB9Cn0KCmNsYXNzIFBhZ2luYXRlZExpc3RTY3JlZW4gZXh0ZW5kcyBTdGF0ZWZ1bFdpZGdldCB7CiAgQG92ZXJyaWRlCiAgX1BhZ2luYXRlZExpc3RTY3JlZW5TdGF0ZSBjcmVhdGVTdGF0ZSgpID0+IF9QYWdpbmF0ZWRMaXN0U2NyZWVuU3RhdGUoKTsKfQoKY2xhc3MgX1BhZ2luYXRlZExpc3RTY3JlZW5TdGF0ZSBleHRlbmRzIFN0YXRlPFBhZ2luYXRlZExpc3RTY3JlZW4+IHsKICBmaW5hbCBTY3JvbGxDb250cm9sbGVyIF9zY3JvbGxDb250cm9sbGVyID0gU2Nyb2xsQ29udHJvbGxlcigpOwogIGZpbmFsIExpc3Q8U3RyaW5nPiBfaXRlbXMgPSBbXTsKICBib29sIF9pc0xvYWRpbmcgPSBmYWxzZTsKICBpbnQgX2N1cnJlbnRQYWdlID0gMTsKICBmaW5hbCBpbnQgX3BhZ2VTaXplID0gMjA7CiAgYm9vbCBfaGFzTW9yZSA9IHRydWU7CgogIEBvdmVycmlkZQogIHZvaWQgaW5pdFN0YXRlKCkgewogICAgc3VwZXIuaW5pdFN0YXRlKCk7CiAgICBfZmV0Y2hQYWdlKCk7CiAgICBfc2Nyb2xsQ29udHJvbGxlci5hZGRMaXN0ZW5lcihfb25TY3JvbGwpOwogIH0KCiAgQG92ZXJyaWRlCiAgdm9pZCBkaXNwb3NlKCkgewogICAgX3Njcm9sbENvbnRyb2xsZXIuZGlzcG9zZSgpOwogICAgc3VwZXIuZGlzcG9zZSgpOwogIH0KCiAgRnV0dXJlPExpc3Q8U3RyaW5nPj4gX2ZldGNoRGF0YShpbnQgcGFnZSwgaW50IHBhZ2VTaXplKSBhc3luYyB7CiAgICAvLyBTaW11bGF0ZSBBUEkgZGVsYXkKICAgIGF3YWl0IEZ1dHVyZS5kZWxheWVkKER1cmF0aW9uKHNlY29uZHM6IDIpKTsKICAgIC8vIFNpbXVsYXRlIHRvdGFsIDEwMCBpdGVtcyBpbiBBUEkKICAgIGludCB0b3RhbEl0ZW1zID0gMTAwOwogICAgaW50IHN0YXJ0ID0gKHBhZ2UgLSAxKSAqIHBhZ2VTaXplOwogICAgaWYgKHN0YXJ0ID49IHRvdGFsSXRlbXMpIHJldHVybiBbXTsKICAgIGludCBlbmQgPSBtaW4oc3RhcnQgKyBwYWdlU2l6ZSwgdG90YWxJdGVtcyk7CiAgICByZXR1cm4gTGlzdC5nZW5lcmF0ZShlbmQgLSBzdGFydCwgKGkpID0+ICdJdGVtIAAyNHtzdGFydCArIGkgKyAxfScpOwogIH0KCiAgdm9pZCBfZmV0Y2hQYWdlKCkgYXN5bmMgewogICAgaWYgKF9pc0xvYWRpbmcgfHwgIV9oYXNNb3JlKSByZXR1cm47CiAgICBzZXRTdGF0ZSgoKSB7CiAgICAgIF9pc0xvYWRpbmcgPSB0cnVlOwogICAgfSk7CiAgICBMaXN0PFN0cmluZz4gbmV3SXRlbXMgPSBhd2FpdCBfZmV0Y2hEYXRhKF9jdXJyZW50UGFnZSwgX3BhZ2VTaXplKTsKICAgIHNldFN0YXRlKCgpIHsKICAgICAgX2l0ZW1zLmFkZEFsbChuZXdJdGVtcyk7CiAgICAgIF9pc0xvYWRpbmcgPSBmYWxzZTsKICAgICAgX2hhc01vcmUgPSBuZXdJdGVtcy5sZW5ndGggPT0gX3BhZ2VTaXplOwogICAgICBpZiAoX2hhc01vcmUpIF9jdXJyZW50UGFnZSsrOwogICAgfSk7CiAgfQoKICB2b2lkIF9vblNjcm9sbCgpIHsKICAgIGlmIChfc2Nyb2xsQ29udHJvbGxlci5wb3NpdGlvbi5waXhlbHMgPj0KICAgICAgICAgICAgX3Njcm9sbENvbnRyb2xsZXIucG9zaXRpb24ubWF4U2Nyb2xsRXh0ZW50IC0gMjAwICYmCiAgICAgICAgIV9pc0xvYWRpbmcgJiYKICAgICAgICBfaGFzTW9yZSkgewogICAgICBfZmV0Y2hQYWdlKCk7CiAgICB9CiAgfQoKICBAb3ZlcnJpZGUKICBXaWRnZXQgYnVpbGQoQnVpbGRDb250ZXh0IGNvbnRleHQpIHsKICAgIHJldHVybiBTY2FmZm9sZCgKICAgICAgYXBwQmFyOiBBcHBCYXIodGl0bGU6IFRleHQoJ1BhZ2luYXRlZCBMaXN0JykpLAogICAgICBib2R5OiBMaXN0Vmlldy5idWlsZGVyKAogICAgICAgIGNvbnRyb2xsZXI6IF9zY3JvbGxDb250cm9sbGVyLAogICAgICAgIGl0ZW1Db3VudDogX2l0ZW1zLmxlbmd0aCArIChfaXNMb2FkaW5nIHx8IF9oYXNNb3JlID8gMSA6IDApLAogICAgICAgIGl0ZW1CdWlsZGVyOiAoY29udGV4dCwgaW5kZXgpIHsKICAgICAgICAgIGlmIChpbmRleCA8IF9pdGVtcy5sZW5ndGgpIHsKICAgICAgICAgICAgcmV0dXJuIExpc3RUaWxlKHRpdGxlOiBUZXh0KF9pdGVtc1tpbmRleF0pKTsKICAgICAgICAgIH0gZWxzZSBpZiAoX2hhc01vcmUgfHwgX2lzTG9hZGluZykgewogICAgICAgICAgICByZXR1cm4gUGFkZGluZygKICAgICAgICAgICAgICBwYWRkaW5nOiBjb25zdCBFZGdlSW5zZXRzLmFsbCgxNi4wKSwKICAgICAgICAgICAgICBjaGlsZDogQ2VudGVyKGNoaWxkOiBDaXJjdWxhclByb2dyZXNzSW5kaWNhdG9yKCkpLAogICAgICAgICAgICApOwogICAgICAgICAgfQogICAgICAgICAgcmV0dXJuIFNpemVkQm94LnNocmluaygpOwogICAgICAgIH0sCiAgICAgICksCiAgICApOwogIH0KfQ==

To avoid duplicate API calls during infinite scrolling, always check if a request is already in progress before starting a new one. Use a flag like `'_isLoading'` to prevent multiple simultaneous requests, which can lead to repeated data or wasted bandwidth.

Note

The code above demonstrates a paginated `ListView` that fetches more items from a simulated API as you scroll. A `ScrollController` listens for the user's scroll position. When the user nears the end of the list, the controller triggers another API call to fetch the next page. The `_currentPage` variable keeps track of which page to request next, and `_hasMore` ensures that fetching stops when all data has been loaded. This pattern efficiently loads new items only as needed, providing a smooth infinite scrolling experience.

Why is pagination important when displaying large lists from an API?

Master the art of integrating REST APIs into Flutter apps. This course guides you from understanding HTTP fundamentals to building robust, scalable, and maintainable API-driven Flutter applications. Learn to handle networking, JSON parsing, error management, authentication, file transfers, and architect your code for real-world production use.

Build a solid foundation in HTTP networking, JSON handling, and error management for Flutter apps.

Display, update, and interact with real API data in Flutter UIs, handling loading, errors, and user input.

Structure your Flutter API apps for scalability, maintainability, and testability using clean architecture principles.

Pagination and Infinite Lists