How to display RefreshIndicator at top with ListView.builder reverse:true

Question

I'm building a simple messaging system, where the user will see a list of messages.

I have a ListView.Builder with reverse:true since I want the list to appear at the bottom when they load the messaging page.

When they pull down to scroll all the way to the top I want a refresh indicator to appear so they can load previous messages, like most popular chat applications do.

However due to having reverse:true on the list they have to pull up at the bottom of the screen to load previous messages while using a RefreshIndicator.

Is there a way to make the RefreshIndicator trigger when pulling down rather than up when using reverse:true?

@DharmendraPoonia I used an answer similar to the accepted answer. You should be able to listen for when the scroll position is at the max scroll up and then load some more. I didn't use the RefreshIndicator, I made a custom spinner appear. — MrBlue, Jan 19 '19 at 16:04

score 0 · Accepted Answer · answered Jul 23 '18 at 14:54

In my opinion,do you want to load more at the bottom of the listview,i think you just need to add one load more view to the last item of the listview,like the following code:

import 'package:flutter/material.dart';
import 'dart:async';


void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
      body: new LoadMoreListView(enableLoadMore: true, count: 30,),
    ),
  ));
}

class LoadMoreListView extends StatefulWidget {

  bool enableLoadMore;
  int count;

  LoadMoreListView({this.enableLoadMore = true, this.count = 15});

  @override
  State<StatefulWidget> createState() {
    return new LoadMoreListViewState();
  }

}

class LoadMoreListViewState extends State<LoadMoreListView> {

  ScrollController _scrollController = new ScrollController();
  bool isRequesting = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        ///load more when the listView attached the bottom
        loadMore();
      }
    });
  }

  Future<Null> loadMore() async {
    if (isRequesting) {
      ///if is requesting ,return the next action
      return null;
    }
    setState(() {
      isRequesting = true;
    });

    ///loading your data from any where,eg:network
    return null;
  }

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

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: _count(),
        itemBuilder: _buildItem);
  }

  _count() {
    if (widget.enableLoadMore) {
      return widget.count + 1;
    }
    return widget.count;
  }

  Widget _buildItem(BuildContext context, int index) {
    if (index == widget.count) {
      return _buildLoadMoreView();
    }
    return new Container(
      height: 36.0,
      child: new Center(
        child: new Text("I am the $index item"),
      ),
    );
  }

  Widget _buildLoadMoreView() {
    return new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Center(
        child: new Opacity(
          opacity: 1.0,
          child: new CircularProgressIndicator(),
        ),
      ),
    );
  }

}

How to display RefreshIndicator at top with ListView.builder reverse:true

1 Answers1