How to await or rebuild Consumer when data is loaded

Viewed 263

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);
            });
2 Answers

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

Using notifyListener() you can change the state of a consumer.

Below is a sample code. If You need more let me know.

Consumer<DataProviderClass>(
                builder: (context, portfolioProvider, _) {
                print("state changed");
                
                return RaisedButton(
                child: Text("Press"),
                onPressed : () =>  
                   Provider.of<DataProviderClass(context).fetchData(),
                  );
                }
);


                
                
                
class DataProviderClass with ChangeNotifier{
    fetchData(){
      notifyListener();
    }
}

Related