flutter: no refresh indicator when using RefreshIndicator - flutter

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

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 2

Refresh Indicator by default does not work on a short list so add the following to the ListView.builder
physics: const AlwaysScrollableScrollPhysics(),

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

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

Answer 5

You can use ListView with SinglchildScrollView widget also.
RefreshIndicator(
onRefresh: () {
//HERE YOUR FUNCTION TO CALL
},
child: Stack(
children: <Widget>[
ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: []
)
],
),
),

Answer 6

In Non-scrollable list view, RefreshIndicator does not work, so you have to wrap your widget with Stack for implementing pull down to refresh.
RefreshIndicator(
onRefresh: () {
// Refresh Functionality
},
child: Stack(
children: [
ListView(
padding: EdgeInsets.zero,
shrinkWrap: true,
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
)
],
),
// Your Widget
],
);
),

Answer 7

I think the best approach by far is to use CustomScrollView with RefreshIndicator. See example below.
class RefreshDemo extends StatelessWidget {
const RefreshDemo({super.key});
#override
Widget build(BuildContext context) {
return RefreshIndicator(
onRefresh: () async {
// Your refresh logic goes here
await Future.delayed(Duration(seconds: 2));
return true;
},
child: CustomScrollView(
slivers: [
// Wrap your widgets with the SliverToBoxAdapter
SliverToBoxAdapter(
child: Container(
child: Column(
children: [
Text('Hello'),
Text('World'),
]
)
),
),
],
),
);
}
}

Answer 8

I got the solution of this after little change from one answer which was already there in current page!
Just need to change position of stack children (main widget first then listview).
updated answer which will work 100%:
RefreshIndicator(
onRefresh: () {},
child: Stack(
children: <Widget>[YOUR_CHILD_WIDGET, ListView()],
),
),
past answer from above answers:
RefreshIndicator(
onRefresh: () {},
child: Stack(
children: <Widget>[ListView(), YOUR_CHILD_WIDGET],
),
),

Answer 9

The most important is to implement in ListView:
physics: const AlwaysScrollableScrollPhysics(),
because otherwise items which are not covering whole screen are stuck and you cannot move/refresh them.

Answer 10

as mentioned above refresh indicator only works with Listview so use it else wrap Listview with Stack