flutter: no refresh indicator when using RefreshIndicator

Question

I added the RefreshIndicator to my page, but there is no indicator visible when pull to refresh. The code is below:

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: LocalGalleryTab(),
    );
  }
}

class LocalGalleryTab extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LocalGalleryState();
  }
}

class _LocalGalleryState extends State<LocalGalleryTab> {
  @override
  Widget build(BuildContext context) {
    return new Container(child: new Center(
      child: new RefreshIndicator(
        child: Text("Local Gallery"),
        onRefresh: _refreshLocalGallery,
      ),
    ));
  }

  Future<Null> _refreshLocalGallery() async{
    print('refreshing stocks...');

  }
}

How to use the RefreshIndicator? The flutter doc does not give much infomation.

Answer 1

Using AlwaysScrollableScrollPhysics() will ensure that the scroll view is always scrollable and, therefore, can trigger the RefreshIndicator.

Right now I think Create the scroll physics with BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics) and not just AlwaysScrollableScrollPhysics() scroll physics. Because BouncingScrollPhysics works for short lists for bounce. Now AlwaysScrollableScrollPhysics is required to be included for the expected behaviour.

RefreshIndicator(     onRefresh: _onRefresh,     child: ListView(       padding: EdgeInsets.all(8.0),       physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),       children: _listData.map((i) {         return ListTile(           title: Text("Item $i"),         );       }).toList(),     ) ); 

Answer 2

By design, RefreshIndicator works with ListView.

But if you want to use RefreshIndicator with non-scrollable-widgets, you can wrap your widget into Stack with ListView:

RefreshIndicator(
  onRefresh: () {},
  child: Stack(
    children: <Widget>[ListView(), YOUR_CHILD_WIDGET],
  ),
),

Answer 3

You need to add scroll child inside RefreshIndicator see example below

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: LocalGalleryTab(),
    );
  }
}

class LocalGalleryTab extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LocalGalleryState();
  }
}

class _LocalGalleryState extends State<LocalGalleryTab> {
  @override
  Widget build(BuildContext context) {
    return new Container(child: new Center(
      child: new RefreshIndicator(
        child: ListView(
          children: List.generate(50,  (f) => Text("Item $f")),
        ),
        onRefresh: _refreshLocalGallery,
      ),
    ));
  }

  Future<Null> _refreshLocalGallery() async{
    print('refreshing stocks...');

  }
}

Answer 4

Refresh Indicator by default does not work on a short list so add the following to the ListView.builder

physics: const AlwaysScrollableScrollPhysics(),

Answer 5

RefreshIndicator(
   onRefresh: _onRefresh,
   child:SingleChildScrollView(
   physics: AlwaysScrollableScrollPhysics(),
   child: ListView(
   padding: EdgeInsets.all(8.0),

   children: _listData.map((i) {
    return ListTile(
      title: Text("Item $i"),
    );
  }).toList(),
 )
)
);

Add physics in SingleChildScrollView