Flutter

How to implement SwipeRefreshLayout on Flutter

By November 11, 2020 January 10th, 2021 No Comments

If you are wondering what is the equivalent of SwipeRefreshLayout in Flutter.

Here is the answer: RefreshIndicator.

And it is much more simple than its brother in Android. Let’s have a look at how it works:

It is so damn easy to use it!

Just wrap your List (the descendant widget must be a scrollable widget, you can use SingelScrollableChild if you have a non scrollable widget).

set the onRefresh parameter with a function that will reload the List and that is it!

Example using ListView:

class _MyAppState extends State<MyApp> {
  List<String> _values = [];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RefreshIndicator(
            onRefresh:()async{ 
                //my refresh method
              setState((){
                _values.add(Random().nextInt(100).toString());
              });
            },
          child:ListView(children:_values.map((e)=>Text(e)).toList())
          ),
        ),
      ),
    );
  }
}

 

Example using a non scrollable widget as child:

Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: Center(
         child: RefreshIndicator(
           onRefresh:()async{ 
               //my refresh method
           },
         child:CustomScrollView(
           slivers:[
             SliverFillRemaining (child:MyWidget())
           ]
           )
         ),
       ),
     ),
   );
 }
Ernie

Author Ernie

More posts by Ernie