How to await or rebuild Consumer when data is loaded

Question

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

I need more description about currentPosition and other code. — Abbas Jafari, Jun 29 '21 at 14:52
currentPosition is being fetched by API to gete my location and main thing is places which are fetching from APIS and markers a re being added to that places — Dveloper, Jun 29 '21 at 15:20
Consumer is used to build a widget with the data provided, not to do future logic with it, I recommend do that logic somewhere else or use FutureProvider instead of consumer and then consume it — EdwynZN, Jun 29 '21 at 15:22

Arslan Kaleem · Accepted Answer · 2021-06-29T20:22:17.243

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

First Scenario is throwing some error but yes second Scenario worked for me. — Dveloper, Jun 29 '21 at 18:49
There is a problem is second scenario. Although it worked but now problem is it is rebuilding again and again because of `setState((){})` after every build — Dveloper, Jun 29 '21 at 18:50
Add condition like declare any `bool isSet = false;` and then while apply condition and `setState((){});` in it. Like `if(isSet == false){ setState((){ isSet = true; markers = markerService.getBarMarkers(places,markerIcon: this.bitmapIcon,); } ); }` — Arslan Kaleem, Jun 29 '21 at 20:17

score 0 · Answer 2 · answered Jun 29 '21 at 17:02

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();
    }
}

The thing is I want my system automatically rebuild itself on data uploaded — Dveloper, Jun 29 '21 at 18:48

How to await or rebuild Consumer when data is loaded

2 Answers2