Flutter ListView jumps to top on each setState() call

Question

I have a ListView of customers where the user is able to check/uncheck each customer to mark them as a 'favourite'. However, each time a ListItem is tapped, the ListView jumps back to the top of the screen.

How do I prevent this from happening? I only want the Checkbox to refresh, not the entire screen, and to prevent the screen from jumping to the top each time.

@override
Widget build(BuildContext context) {
  customers = getAllCustomers();

  return Scaffold(
     appBar: _getAppBar(),
     body: customers != null
          ? FutureBuilder(
              future: getFavouriteCustomers(), // contains IDs of favourite customers
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  if (snapshot.hasData) {
                    List<String> favouriteCustomersList = snapshot.data;

                    return ListView.builder(
                        itemCount: customers?.length ?? 0,
                        itemBuilder: (BuildContext context, int index) {
                          customer c = customers?.elementAt(index);

                          if (favouriteCustomersList.contains(c.id)) {
                            c.isSelected = true;
                          }

                          return ListTile(
                            title: Text(c.name),
                            trailing: Checkbox(
                                value: c.isFavourite,
                                onChanged: (newValue) {}),
                            onTap: () {
                              if (c.isSelected) {
                                setState(() {
                                  c.setFavourite(false);
                                });
                              } else {
                                setState(() {
                                  c.setFavourite(true);
                                }
                              }
                            },
                          );
                        });
                  }
                } else {
                  return CircularProgressIndicator();
                }
              })
          : Center(
              child: CircularProgressIndicator(),
            );
);

}

Answer 1

1. Ensure you are doing this in a StatefulWidget.

2. Create a ScrollController as field in the state class (not the widget class):

  _controller = ScrollController(keepScrollOffset: true);

This way the controller will be preserved in the state and not recreated on rebuilds.

3. Pass it to the builder as

  controller: _controller,

4. Remember to dispose the controller when the state is destroyed:

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

5. As Benno mentioned, ensure that all the way up the widget tree there are no widgets with keys being recreated on rebuilds: How to prevent Flutter app from scrolling to top after calling setState?