How to solve: Flutter ListView lazy loading


Asked by Valentin S on March 27, 2018 (source).

How can I realize items lazy loading for endless listview? I want to load more items by network when user scroll to the end of listview.


Question answered by Rémi R (source).

You can listen to a ScrollController.

ScrollController has some useful information, such as the scrolloffset and a list of ScrollPosition.

In your case the interesting part is in controller.position which is the currently visible ScrollPosition. Which represents a segment of the scrollable.

ScrollPosition contains informations about it's position inside the scrollable. Such as extentBefore and extentAfter. Or it's size, with extentInside.

Considering this, you could trigger a server call based on extentAfter which represents the remaining scroll space available.

Here's an basic example using what I said.

class MyHome extends StatefulWidget {
  _MyHomeState createState() => new _MyHomeState();

class _MyHomeState extends State<MyHome> {
  ScrollController controller;
  List<String> items = new List.generate(100, (index) => 'Hello $index');

  void initState() {
    controller = new ScrollController()..addListener(_scrollListener);

  void dispose() {

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Scrollbar(
        child: new ListView.builder(
          controller: controller,
          itemBuilder: (context, index) {
            return new Text(items[index]);
          itemCount: items.length,

  void _scrollListener() {
    if (controller.position.extentAfter < 500) {
      setState(() {
        items.addAll(new List.generate(42, (index) => 'Inserted $index'));

You can clearly see that when reaching the end of the scroll, it scrollbar expends due to having loaded more items.