RefreshIndicator on horizontal ListView.builder

Question

I have a horizontal ListView.builder widget that I want to refresh with a RefreshIndicator when pulling it to the left.

                FutureBuilder(
                    future: _initGetTopX(),
                    builder: (context, wikiSnapshot) {
                      if (ConnectionState.active != null &&
                          !wikiSnapshot.hasData) {
                        return Center(child: CircularProgressIndicator());
                      }

                      if (ConnectionState.done != null &&
                          wikiSnapshot.hasError) {
                        return Center(child: Text(wikiSnapshot.error));
                      }

                      return Container(
                        height: 220,
                        child: RefreshIndicator(
                          onRefresh: _refreshInitGetTopX,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            physics: const AlwaysScrollableScrollPhysics(),
                            itemCount: _getTopXList.length,
                            itemBuilder: (context, index) {
                              return Row(
                                children: [
                                  MainImageThumb(
                                    myTitle: _getTopXList[index].title +
                                        " (" +

The List is loading initally but the RefreshIndicator doesn't show up and it doesn't reload neither... How can I reload this list?

Solution

You can use ScrollController to listen for scrollExtents

ScrollController _controller;

We instantiate it within our initState method, in the following way:

@override void initState() {

 _controller = ScrollController();
super.initState();

}

Then we assign this _controller to our ListView.

 controller: _controller,

With this we have our ListView connected with our ScrollController, we just have to listen to the events to determine what we want. Listening to events

 @override
  void initState() {
    _controller = ScrollController();
    _controller.addListener(_scrollListener);
    super.initState();
  }

Now we are listening to the Scroll events, but how we can know if the scroll reach the top or bottom.

We just have to add these validations:

_scrollListener() {
    if (_controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange) {
      setState(() {
        message = "reach the end right";
      });
    }
    if (_controller.offset <= _controller.position.minScrollExtent &&
        !_controller.position.outOfRange) {
      setState(() {
        message = "reach the end left";
      });
    }
  }

for indepth you can read more here

Comments

[rickimaru]

I think RefreshIndicator does not support horizontal scrolling, refer here, line 356.