Refresh flutter FUTUREBUILDER with a swipe up

Question

I have an app that gets some data from firebase and than calls a class to display a widget based on the data from firebase. I tried adding a swipe up refresh but i have no idea where to put it and what to to call on refresh. I was trying it using the RefreshIndicator.

Here i will put my code in which it calls the database(firebase) and than creates an widget for each event in the database.

If you need any more information, please feel free to comment. Thank you so much for the help!

FutureBuilder(
      future: databaseReference.once(),
      builder: (context, AsyncSnapshot<DataSnapshot> snapshot) {
        List lists = [];
        if (snapshot.hasData) {
        lists.clear();
        Map<dynamic, dynamic> values = snapshot.data.value;
        values.forEach((key, values) {
            lists.add(values);
        });
        return new ListView.builder(
          primary: false,
          padding: EdgeInsets.only(left:12.0,right:12,bottom: 15,),
          shrinkWrap: true,
          itemCount: lists.length,
          itemBuilder: (BuildContext context, int index) {
          if(lists[index]["Status"]== "Active"){;
          return Container(
          child:EvendWidget(lists[index]["EventImage"], 
                Text(lists[index]["EventName"]).data,
                Text(lists[index]["EventLocation"]+ ", "+lists[index] 
                ["EventCounty"] ).data,
                Text(lists[index]["Date"]+ ", "+lists[index]["Time"]+ 
                " - "+lists[index]["Time"]).data,
                Text(lists[index]["Duration"]+ " H").data,
                Text(lists[index]["Genre"]).data,
                Text(lists[index]["Price"]).data,false));}else{return 
                SizedBox.shrink(); };
            });
        }
        return Container(
          margin: const EdgeInsets.only(top: 300),
          child:CircularProgressIndicator());
    }),

If you need any more information, please feel free to comment. Thank you so much for the help!

Answer 1

Call setState in swipe action. It triggers build method in widget and call your future again.

onRefresh: () {
  setState(() {});
}

Answer 2

you can use RefreshIndicator for swipe to refresh. https://api.flutter.dev/flutter/material/RefreshIndicator-class.html

use ListView.Builder as child of RefreshIndicator and in onRfresh use your future method

like this:

//define in widget
var refreshkey = GlobalKey<RefreshIndicatorState>();

FutureBuilder(
  future: databaseReference.once(),
  builder: (context, AsyncSnapshot<DataSnapshot> snapshot) {
    List lists = [];
    if (snapshot.hasData) {
    lists.clear();
    Map<dynamic, dynamic> values = snapshot.data.value;
    values.forEach((key, values) {
        lists.add(values);
    });
    return RefreshIndicator(
        key: refreshkey,
        onRefresh: databaseReference.once(),
        child: ListView.builder(
          primary: false,
          padding: EdgeInsets.only(left:12.0,right:12,bottom: 15,),
          shrinkWrap: true,
          itemCount: lists.length,
          itemBuilder: (BuildContext context, int index) {
          if(lists[index]["Status"]== "Active"){;
          return Container(
          child:EvendWidget(lists[index]["EventImage"], 
                Text(lists[index]["EventName"]).data,
                Text(lists[index]["EventLocation"]+ ", "+lists[index] 
                ["EventCounty"] ).data,
                Text(lists[index]["Date"]+ ", "+lists[index]["Time"]+ 
                " - "+lists[index]["Time"]).data,
                Text(lists[index]["Duration"]+ " H").data,
                Text(lists[index]["Genre"]).data,
                Text(lists[index]["Price"]).data,false));}else{return 
                SizedBox.shrink(); };
        });
    )
      
    }
    return Container(
      margin: const EdgeInsets.only(top: 300),
      child:CircularProgressIndicator());
}),

maybe need some edit.

Answer 3

RefreshIndicator(
        onRefresh: () {
          return Future(() { setState(() {}); });
        },
        child: FutureBuilder(
        ...

Will help you