Flutter: Execute a function on Startup - wait for HTTP response parser to extract image URL

Question

I am developing a Flutter app which I need to get almost everything from an API including images, colors, texts, and etc. So what I should do is to build the main structure of the app and then fill-in everything with provided information from API. It is necessary for me to make the API call (HTTP GET) when the app starts to get the response and initialize the variables to use them in the app.

I used the instruction here to execute a function on startup. In that function, I am making an HTTP GET request and parse the JSON file to extract the information I need.

However, the problem is that flutter does not wait for the response of the HTTP request so that I can use the parsed information from the received JSON.

So here in below code, I am using a getdata() function to parse the JSON in order to extract an ImageURL from a JSON file and then use the URL in NetworkImage.

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: HomeScreen());
  }
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen>
    with AfterLayoutMixin<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: (
      Image.Network(imageurl.toString())
      )
    );
  }
@override
  void afterFirstLayout(BuildContext context) {
    imageURL = getData().toString();
  }

  Future getData() async {
    var res = await http
        .get(Uri.encodeFull(link), headers: {"Accept": "application/json"});
    if (res.statusCode == 200) {
      var data = json.decode(res.body);
      var page = data["page"] as Map;
      var attributes = page["attributes"] as List;

      for (var i = 0; i < attributes.length; i++) {
        if (attributes[i]["key"] == "image") {
          return attributes[i]["value"];
        }
      }
    }
  }
}

When debugging, I realized that when flutter reaches to getdata() line, it executes the HTTP request but since it is async, it doesn't wait for the response and it continues to build the app (therefore the imageURL variable is empty since the JSON has not been parsed yet). What happens is that the image is not shown in its place.

Thanks in advance.

Answer 1

your code contents some bugs , but any way , you can use the futureBuilder , if you sure getData() return a image link then replace your "build" method by :

  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
        body: FutureBuilder<String>(
          future: getData(), // if you mean this method well return image url
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if(snapshot.connectionState == ConnectionState.done){
              return Image.network(snapshot.data);
            }else if(snapshot.connectionState == ConnectionState.waiting){
              return Text("loading ...");
             }
          },
        )
    );
  }

this code should show "loading" until the getData method completely execute , then it well show the image depend on returned URL (should be String) read more about "FutureBuilder"