Summary  
This chapter covers implementing infinite scrolling pagination by detecting when the user scrolls near the end of a list, managing load state, fetching additional data pages, appending them to an existing collection, and displaying loading indicators.

General domain of usage  
Scrollable data lists in user interfaces

**Pagination** is a technique that lets you load large sets of data in smaller, manageable chunks.

Definition

Watch as a paginated list is built in Flutter, demonstrating how to fetch and append remote data as the user scrolls. See how scroll controllers trigger new API requests, and how loading indicators provide feedback during data fetches.

In Flutter, infinite scrolling is a common way to implement pagination, where more data is fetched as the user reaches the end of a scrollable list. This approach keeps your app responsive and efficient, especially when working with remote APIs that return long lists of items.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSA9PiBydW5BcHAoUGFnaW5hdGVkTGlzdEFwcCgpKTsKCmNsYXNzIFBhZ2luYXRlZExpc3RBcHAgZXh0ZW5kcyBTdGF0ZWxlc3NXaWRnZXQgewogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewogICAgcmV0dXJuIE1hdGVyaWFsQXBwKAogICAgICBob21lOiBQYWdpbmF0ZWRMaXN0U2NyZWVuKCksCiAgICApOwogIH0KfQoKY2xhc3MgUGFnaW5hdGVkTGlzdFNjcmVlbiBleHRlbmRzIFN0YXRlZnVsV2lkZ2V0IHsKICBAb3ZlcnJpZGUKICBfUGFnaW5hdGVkTGlzdFNjcmVlblN0YXRlIGNyZWF0ZVN0YXRlKCkgPT4gX1BhZ2luYXRlZExpc3RTY3JlZW5TdGF0ZSgpOwp9CgpjbGFzcyBfUGFnaW5hdGVkTGlzdFNjcmVlblN0YXRlIGV4dGVuZHMgU3RhdGU8UGFnaW5hdGVkTGlzdFNjcmVlbj4gewogIGZpbmFsIFNjcm9sbENvbnRyb2xsZXIgX2NvbnRyb2xsZXIgPSBTY3JvbGxDb250cm9sbGVyKCk7CiAgZmluYWwgTGlzdDxpbnQ+IF9pdGVtcyA9IFtdOwogIGJvb2wgX2lzTG9hZGluZyA9IGZhbHNlOwogIGJvb2wgX2hhc01vcmUgPSB0cnVlOwogIGludCBfcGFnZSA9IDA7CiAgZmluYWwgaW50IF9saW1pdCA9IDIwOwoKICBAb3ZlcnJpZGUKICB2b2lkIGluaXRTdGF0ZSgpIHsKICAgIHN1cGVyLmluaXRTdGF0ZSgpOwogICAgX2ZldGNoSXRlbXMoKTsKICAgIF9jb250cm9sbGVyLmFkZExpc3RlbmVyKCgpIHsKICAgICAgaWYgKF9jb250cm9sbGVyLnBvc2l0aW9uLnBpeGVscyA+PSBfY29udHJvbGxlci5wb3NpdGlvbi5tYXhTY3JvbGxFeHRlbnQgLSAyMDAgJiYgIV9pc0xvYWRpbmcgJiYgX2hhc01vcmUpIHsKICAgICAgICBfZmV0Y2hJdGVtcygpOwogICAgICB9CiAgICB9KTsKICB9CgogIEZ1dHVyZTx2b2lkPiBfZmV0Y2hJdGVtcygpIGFzeW5jIHsKICAgIHNldFN0YXRlKCgpIHsKICAgICAgX2lzTG9hZGluZyA9IHRydWU7CiAgICB9KTsKCiAgICAvLyBTaW11bGF0ZSBBUEkgY2FsbCBkZWxheQogICAgYXdhaXQgRnV0dXJlLmRlbGF5ZWQoRHVyYXRpb24oc2Vjb25kczogMikpOwoKICAgIC8vIFNpbXVsYXRlIEFQSSByZXNwb25zZQogICAgTGlzdDxpbnQ+IGZldGNoZWQgPSBMaXN0LmdlbmVyYXRlKF9saW1pdCwgKGkpID0+IF9wYWdlICogX2xpbWl0ICsgaSk7CgogICAgc2V0U3RhdGUoKCkgewogICAgICBfaXRlbXMuYWRkQWxsKGZldGNoZWQpOwogICAgICBfaXNMb2FkaW5nID0gZmFsc2U7CiAgICAgIF9wYWdlKys7CiAgICAgIGlmIChmZXRjaGVkLmxlbmd0aCA8IF9saW1pdCkgewogICAgICAgIF9oYXNNb3JlID0gZmFsc2U7CiAgICAgIH0KICAgIH0pOwogIH0KCiAgQG92ZXJyaWRlCiAgdm9pZCBkaXNwb3NlKCkgewogICAgX2NvbnRyb2xsZXIuZGlzcG9zZSgpOwogICAgc3VwZXIuZGlzcG9zZSgpOwogIH0KCiAgQG92ZXJyaWRlCiAgV2lkZ2V0IGJ1aWxkKEJ1aWxkQ29udGV4dCBjb250ZXh0KSB7CiAgICByZXR1cm4gU2NhZmZvbGQoCiAgICAgIGFwcEJhcjogQXBwQmFyKHRpdGxlOiBUZXh0KCdQYWdpbmF0ZWQgTGlzdCcpKSwKICAgICAgYm9keTogTGlzdFZpZXcuYnVpbGRlcigKICAgICAgICBjb250cm9sbGVyOiBfY29udHJvbGxlciwKICAgICAgICBpdGVtQ291bnQ6IF9pdGVtcy5sZW5ndGggKyAoX2hhc01vcmUgPyAxIDogMCksCiAgICAgICAgaXRlbUJ1aWxkZXI6IChjb250ZXh0LCBpbmRleCkgewogICAgICAgICAgaWYgKGluZGV4IDwgX2l0ZW1zLmxlbmd0aCkgewogICAgICAgICAgICByZXR1cm4gTGlzdFRpbGUodGl0bGU6IFRleHQoJ0l0ZW0gG1ske19pdGVtc1tpbmRleF19JykpOwogICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgcmV0dXJuIFBhZGRpbmcoCiAgICAgICAgICAgICAgcGFkZGluZzogY29uc3QgRWRnZUluc2V0cy5zeW1tZXRyaWModmVydGljYWw6IDE2LjApLAogICAgICAgICAgICAgIGNoaWxkOiBDZW50ZXIoY2hpbGQ6IENpcmN1bGFyUHJvZ3Jlc3NJbmRpY2F0b3IoKSksCiAgICAgICAgICAgICk7CiAgICAgICAgICB9CiAgICAgICAgfSwKICAgICAgKSwKICAgICk7CiAgfQp9

Scroll controllers allow you to listen for scroll events and determine when the user is near the end of a list. In the paginated list example, a `ScrollController` is used to trigger the loading of more items as the user scrolls close to the bottom. A loading indicator, such as `CircularProgressIndicator`, is displayed at the end of the list while new data is being fetched. This provides clear feedback and ensures a smooth user experience during incremental data loading.

dm9pZCBtYWluKCkgewogIExpc3Q8U3RyaW5nPiBjdXJyZW50SXRlbXMgPSBbJ0FwcGxlJywgJ0JhbmFuYScsICdDaGVycnknXTsKICBMaXN0PFN0cmluZz4gbmV3SXRlbXMgPSBbJ0RhdGUnLCAnRWxkZXJiZXJyeSddOwoKICAvLyBBcHBlbmQgbmV3SXRlbXMgdG8gY3VycmVudEl0ZW1zCiAgY3VycmVudEl0ZW1zLmFkZEFsbChuZXdJdGVtcyk7CgogIHByaW50KGN1cnJlbnRJdGVtcyk7IC8vIE91dHB1dDogW0FwcGxlLCBCYW5hbmEsIENoZXJyeSwgRGF0ZSwgRWxkZXJiZXJyeV0KfQ==

Which of the following is a best practice when implementing pagination in a Flutter app?

Master state management and data handling in Flutter to build robust, data-driven applications that work seamlessly both online and offline. Explore essential state management techniques, remote data fetching, error handling, and local storage solutions to create resilient Flutter apps.

Explore the core concepts of state management in Flutter, from basic setState to advanced patterns like Provider and Riverpod.

Learn to fetch, parse, and manage remote data in Flutter using REST APIs and JSON serialization.

Persist data locally in Flutter using SharedPreferences, secure storage, and SQLite with Drift.

Pagination and Infinite Lists