Prevent ListView to redraw all items in Flutter

Question

I use a FutureBuilder to build items in my listView. At the first call it's ok, but at second, and more, all items are recreated and not juste the news; this create a clipping effect when the new items are added. I check if the widget has to make an API call in the scrollController. This is my code:

class _Page2State extends State<Page2> {
  ScrollController _scrollController = new ScrollController();
  List _pokemonLightList = [];
  String _nextUrl;

  @override
  void initState() {
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        setState(() {});
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("Dynamic Demo")),
        body: FutureBuilder(
            future: bloc.getPokemonLightList(_nextUrl),
            builder: (BuildContext context,
                AsyncSnapshot<PokemonLightList> snapshot) {
              if (snapshot.hasError)
                return new Text('Error: ${snapshot.error}');
              else {
                switch (snapshot.connectionState) {
                  case ConnectionState.none:
                  case ConnectionState.waiting:
                    return Center(child: CircularProgressIndicator());
                  default:
                    if (snapshot.hasData) {
                      _nextUrl = snapshot.data.next;
                      _pokemonLightList.addAll(snapshot.data.results);
                    }
                    return _buildList(_pokemonLightList);
                }
              }
            }));
  }

  Widget _buildList(List list) {
    return ListView.separated(
      key: PageStorageKey('myListView'),
      shrinkWrap: true,
      primary: false,
      //+1 for progressbar
      itemCount: list.length + 1,
      separatorBuilder: (context, index) {
        return Divider();
      },
      itemBuilder: (BuildContext context, int index) {
        if (index == list.length) {
          return Center(child: CircularProgressIndicator());
        } else {
          return Card(
            color: Colors.amberAccent,
            child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  children: <Widget>[
                    Text(
                      (list[index].name),
                      style: TextStyle(color: Colors.black),
                    ),
                    Text(
                      (list[index].url),
                      style: TextStyle(color: Colors.black),
                    ),
                  ],
                )),
          );
        }
      },
      controller: _scrollController,
    );
  }
}

This is the clipping effect : https://ibb.co/BnGWsfr

Thanks for your help

Answer 1

Reason
didUpdateWidget of the FutureBuilder state is being called every time a rebuild is issued. This function checks if the old future object is different from the new one, and if so, refires the FutureBuilder.
You can reference detail in https://github.com/flutter/flutter/issues/11426#issuecomment-414047398
and https://medium.com/saugo360/flutter-my-futurebuilder-keeps-firing-6e774830bc2

Solution

Future _future;

    @override
  void initState() {
    _future = bloc.getPokemonLightList();

    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        setState(() {           
           bloc.getPokemonLightList(_nextUrl);            
        });
      }
    });

    super.initState();
  }

FutureBuilder(
  future: _future,