Refresh swipe up to refresh FUTUREBUILDER widget flutter

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!

if you want to "refresh" your data multiple times use `StreamBuilder`, not `FutureBuilder` — pskink, Jan 14 '21 at 08:34
what is the difference between streambuilder and futurebuilder? — Andrei Marin, Jan 14 '21 at 09:34
https://stackoverflow.com/questions/50844519/flutter-streambuilder-vs-futurebuilder — shorol, Jan 14 '21 at 09:37
check this for example: https://dev.to/kazuhideoki/how-to-get-data-from-firestore-and-show-it-on-flutterbuilder-or-streambuilder-e05 — pskink, Jan 14 '21 at 09:50

shorol · Accepted Answer · 2021-01-14T10:03:49.320

1

You can use RefreshIndicator like this:

Future<void> _onRefresh() async {
        databaseReference.once();
        return 'success';
      }

return RefreshIndicator(
          onRefresh: _onRefresh,
             child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                     --your code here--
                 }

Let me know if you need to know anything else.

edited Jan 14 '21 at 10:03

answered Jan 14 '21 at 08:45

shorol

790
5
11

so, i have to add the whole futurebuilder inside? – Andrei Marin Jan 14 '21 at 09:22
yes. just wrap your **ListView.builder** in RefreshIndicator and call the _onRefresh function. – shorol Jan 14 '21 at 09:35
i wrapped it inside and noting happens when i swipe up, my code now looks like this: http://dontpad.com/codessss – Andrei Marin Jan 14 '21 at 09:40
yeah, exactly like in the video – Andrei Marin Jan 14 '21 at 09:49
thank you so much, please tell me is you need any more information – Andrei Marin Jan 14 '21 at 10:00
try **shrinkWrap: false,** – shorol Jan 14 '21 at 10:02
if i add it to flase i get an error in the console (Vertical viewport was given unbounded height.) this is why i added it – Andrei Marin Jan 14 '21 at 10:05
please give your full code, it can be fixed, don't worry – shorol Jan 14 '21 at 10:13
**primary: true**, and make sure your code structure like that : http://dontpad.com/check – shorol Jan 14 '21 at 10:25
Vertical viewport was given unbounded height - will be fixed by using widget correctly, let me show your code structure. – shorol Jan 14 '21 at 10:27
sorry i didnt respond, i had to eat something.. if i put primary on true, it shows the refresh indicator but i cannot scroll – Andrei Marin Jan 14 '21 at 11:00
i think i've answer your question, can you please make my answer as accepted? and for scrolling you can show your code or please replace **child:EvendWidget** with other widget, just for check your refresh is working or not, and you are facing not scrolling issue. – shorol Jan 14 '21 at 11:10
the thing is that it doesnt update the list – Andrei Marin Jan 14 '21 at 11:12
if you want i can put the code somewhere or we can use teamviewer if you want – Andrei Marin Jan 14 '21 at 11:13
have you check your _onRefresh fucntion? is it returning any value/response? – shorol Jan 14 '21 at 11:13
i added a print and it returns the print in the console so it works – Andrei Marin Jan 14 '21 at 11:14
check your databaseReference.once() is called or not. – shorol Jan 14 '21 at 11:17
the databaseReference.once() is called in the refresh function – Andrei Marin Jan 14 '21 at 11:21
then you need quest and decide, how can you manage your data and show on your app. – shorol Jan 14 '21 at 11:25
the thing is that it still doesnt work to scroll when i put primary true – Andrei Marin Jan 14 '21 at 11:27

Refresh swipe up to refresh FUTUREBUILDER widget flutter

1 Answers1