How to await or rebuild Consumer when data is loaded

Issue

How do I reload Consumer when data is loaded or await for data to load. I am using Future Provider and everything is rebuilding itself when data is loaded (currentPosition Fetched) and using circularProgress() while waiting. But consumer is not rebuilding itself aslo can’t use await with consumer package. When I save the code while debugging when it hot reload everything is okay but that’s nit a solutiion. I want the consumer auto reload when data is fetched. I am fetching the data to make markers on google_Maps_Flutter

body: (currentPosition != null)
        ? Consumer<List<Bar>>(builder: (_, places, child) {
            List.generate(places.length, (index) async {
              print(places.length);
              print(index);
              print(imageUrl(places[index].photoRef));
              List<String> wordList = places[index].name.split(" ");

              bitmapIcon = await customBitmapDescriptor(
                imageUrl: imageUrl(places[index].photoRef),
                title: wordList[0],
              );
              markers = markerService.getBarMarkers(
                places,
                markerIcon: this.bitmapIcon,
              );
              print(markers.isEmpty);
            });

Solution

Use setState((){}); to rebuild when data is loaded. Add setState((){}); where you want to rebuild e.g. if you want to reload when data is loaded in bitmapIcon then add

bitmapIcon = await convertImageFileToCustomBitmapDescriptor(
                          imageUrl: imageUrl(places[index].photoRef),
                          title: wordList[0],
                        ).then((value) {
                          setState(() {});
                        });

And if you want to reload when data is loaded in marker then use

setState(() {
              markers = markerService.getBarMarkers(
                            places,
                            markerIcon: this.bitmapIcon,
                          );
                        });

First Scenario

body: (currentPosition != null)
    ? Consumer<List<Bar>>(builder: (_, places, child) {
        List.generate(places.length, (index) async {
          print(places.length);
          print(index);
          print(imageUrl(places[index].photoRef));
          List<String> wordList = places[index].name.split(" ");

          bitmapIcon =await convertImageFileToCustomBitmapDescriptor(
                          imageUrl: imageUrl(places[index].photoRef),
                          title: wordList[0],
                        ).then((value) {
                          setState(() {});
                        });
          markers = markerService.getBarMarkers(
            places,
            markerIcon: this.bitmapIcon,
          );
          print(markers.isEmpty);
        });

Second Scenario

body: (currentPosition != null)
    ? Consumer<List<Bar>>(builder: (_, places, child) {
        List.generate(places.length, (index) async {
          print(places.length);
          print(index);
          print(imageUrl(places[index].photoRef));
          List<String> wordList = places[index].name.split(" ");

          bitmapIcon = await convertImageFileToCustomBitmapDescriptor(
                          imageUrl: imageUrl(places[index].photoRef),
                          title: wordList[0],
                        );
        if(!isSet){
          setState(() {
                          markers = markerService.getBarMarkers(
                            places,
                            markerIcon: this.bitmapIcon,
                          );
                        });
         }
          print(markers.isEmpty);
        });

Thumbs up if this solution helped

Answered By – Arslan Kaleem

Answer Checked By – Clifford M. (FlutterFixes Volunteer)