如何制作從API接收響應的進度條？

Question

在從 API 接收數據到 Flutter 應用程序時，它需要時間來接收。 如何使進度條加載，直到 JSON 數據接收到 Flutter 應用程序並移動到應用程序的下一個屏幕。

我沒有使用 ListView.Builder。 相反，我也將它用於文本、下拉菜單和其他內容。

Answer 1

您可以使用 FutureBuilder 小部件，如用於檢索和顯示數據的食譜所示：

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

此小部件允許您使用有關正在加載的數據和加載本身的狀態的信息來構建布局。

對於future:參數，給他你的http.get請求。

在builder: param 中，給它一個匿名函數來構建你想要顯示的內容。 在上述閉包中，您可以依靠snapshot來了解數據是否已完成下載（ snapshot.hasData ）或下載是否有錯誤（ snapshot.hasError ）。 要顯示您要求的進度條，您可以推斷狀態：如果快照沒有數據或任何錯誤，則它正在加載，您將進度條返回給用戶。