How to add RefreshIndicator with FutureBuilder on Flutter

Issue

I need to implement the pull to refresh action, on a future builder using refresh indicator widget. First of all, i know there are multiple threads on this topic. But I still couldn’t. Here are my codes on the subject:

final QuerySnapshot<Map<String, dynamic>> querySnapshot =
                snapshot.data as QuerySnapshot<Map<String, dynamic>>;
            return ListView(
              physics: const BouncingScrollPhysics(),
              children: <Widget>[
                Container(
                  margin: const EdgeInsets.only(top: 28.8, bottom: 16.8),
                  height: 714.8,
                  child: FutureBuilder<List<FirabaseWeatherModel>>(
                      future: chnageList(querySnapshot),
                      builder: (BuildContext context,
                          AsyncSnapshot<dynamic> snapshot) {
                        if (snapshot.hasData) {
                          ListView.builder(
                            itemCount: firabseModelList.length,
                            padding:
                                const EdgeInsets.only(left: 28.8, right: 12),
                            scrollDirection: Axis.vertical,
                            physics: const BouncingScrollPhysics(),
                            itemBuilder: (context, index) {
                              return Container(
                                height: 214.8,
                                width: 188.4,
                                margin: const EdgeInsets.only(
                                    right: 16.8, bottom: 50),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(9.6),
                                  image: DecorationImage(
                                    fit: BoxFit.cover,
                                    image: CachedNetworkImageProvider(
                                        querySnapshot.docs[index]
                                            .data()['image'],
                                        maxHeight: 200,
                                        maxWidth: 200),
                                  ),),
                                child: Stack(
                                  children: <Widget>[
                                    GestureDetector(
                                        onTap: () => gotoPage(querySnapshot
                                            .docs[index]
                                            .data()['title'])),
                                  ],),);},);
                        } else if (snapshot.connectionState ==
                            ConnectionState.waiting) {
                          return const Center(
                            child: CircularProgressIndicator(),
                          );}
                        return ListView.builder(
                          itemCount: firabseModelList.length,
                          padding: const EdgeInsets.only(left: 28.8, right: 12),
                          scrollDirection: Axis.vertical,
                          physics: const BouncingScrollPhysics(),
                          itemBuilder: (context, index) {
                            return Container(
                              height: 214.8,
                              width: 188.4,
                              margin: const EdgeInsets.only(
                                  right: 16.8, bottom: 50),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(9.6),
                                image: DecorationImage(
                                  fit: BoxFit.cover,
                                  image: CachedNetworkImageProvider(
                                      querySnapshot.docs[index].data()['image'],
                                      maxHeight: 200,
                                      maxWidth: 200),
                                ),),
                              child: Stack(
                                children: <Widget>[
                                  GestureDetector(
                                      onTap: () => gotoPage(querySnapshot
                                          .docs[index]
                                          .data()['title'])),
                                  Positioned(
                                    child: ClipRRect(
                                      child: Container(
                                        height: 80,
                                        alignment: Alignment.centerLeft,
                                        child: Column(
                                          children: [
                                            Align(
                                              child: Container(
                                                alignment: Alignment.topCenter,
                                                child: Text(
                                                  querySnapshot.docs[index]
                                                      .data()['tr'],
                                                  style: const TextStyle(
                                                    fontSize: 15,
                                                  ),),),),
                                            Row(
                                              children: <Widget>[
                                                Expanded(
                                                  child: getImage(
                                                      querySnapshot.docs[index]
                                                          .data()['zposition1']
                                                          .toString(),
                                                      150),
                                                ),],),],),),),),],),);},);}),),],);
                          

I have uploaded all the code in case you want to try it yourself using all the codes. Where should i use these refresh indicator codes:

RefreshIndicator(
                onRefresh: () {},),     

       

Solution

add key

GlobalKey _key = GlobalKey();

Then assign the previous key to the top widget

return RefreshIndicator(
    onRefresh: _refresh,
    child: Container(
      key: _key,
      child: ListView(
      physics: AlwaysScrollableScrollPhysics(),
      children: [
        // do your stuff
      ],
    ),
  ),
);

Then refresh function, as you should update the key

Future<void> _refresh() async {
    if (mounted) {
   _key = GlobalKey();
   setState(() {});
   }
  Future.value(null);
 }

Answered By – Omar Alshyokh

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *