如何制作从API接收响应的进度条？

Question

while receiving data from API to flutter app it takes time to receive. How to make a progress bar to load until the JSON data is received to the flutter app and move to next Screen of the app.

I'm not using ListView.Builder. Instead I use it for texts, dropdown and other things also.

Answer 1

You could use a FutureBuilder widget, as shown in the cookbook for retrieving and displaying data :

FutureBuilder<Album>(
  future: futureAlbum,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data.title);
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    // By default, show a loading spinner.
    return CircularProgressIndicator();
  },
);

This widget allows you to build your layout with information about the data your are loading and the status of the load itself.

For the future: parameter, give him your http.get request.

In the builder: param, give it an anonymous function that builds the content you want to display. In said closure, you can rely on the snapshot to know wether the data has finished downloading ( snapshot.hasData ) or if there was an error downloading ( snapshot.hasError ). To display the progress bar you asked for, you can infer the status : if the snapshot has no data nor any error, therefore it is loading and you return you progress bar to the user.