如何使用ListView.builder管理状态？

Question

So I'm trying to make an app that is requesting images from an API. Before the request is completed, the app displays the error (that red background with yellow letters), but once it has loaded, the widgets are properly displayed.

Each card here is being rendered by a ListView.builder widget, where the data is being passed for each card. The image of the card is accessed by making a request for an images API, where I randomly select an image through passing a query word (in this case, the name of the country).

The way I'm doing this (not sure if it's the correct way by the way) is by having a getImage method (who has setState call after the request is done) ,that is called in the initState() of the widget.

This is part of the code of my card widget:

  String _img;
  bool isLoading = true;

  Future<String> getImage() async {
    String imgURL = await PexelAPI.getImage(widget._country);
    setState(() {
      _img = imgURL;
      isLoading = false;
    });

    return "Data loaded";
  }

  @override
  void initState() {
    super.initState();
    this.getImage();
  }

What I want to do, is access that isLoading , so I can have a CircularProgressIndicator widget before all of the cards are loaded.

How do I do that?

Since the code is preety big, I'm not sure what I should include here. So you if need to see any of the code to answer, I'll add it to the post.

Answer 1

Did you try using a FutureBuilder in the view? Something like this:

Future<String> isDataLoaded;

in the initState():

isDataLoaded = getImages();

In the view:

FutureBuilder(
      future: isDataLoaded,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
       return snapshot.hasData 
       ? WIDGET 
       : CircularProgressIndicator();              
      }