如何在加载值之前显示循环进度指示器？

Question

我有一个小部件，它在第一次单击时显示错误页面，我试图达到的值是 null... 当我第二次打开该小部件时，它可以工作，因为在第一次单击时，值已加载并且屏幕正确显示。 在加载值之前，如何使用户看到循环进度指示器而不是错误页面？

这是小部件：

  Widget build(BuildContext context){
    var user = Provider.of<UserRepository>(context);
    user.cacheGet();
    return Scaffold(
      appBar: AppBar(
        title: Text("Last Conversation"),
      ),
      body: user.conversationID.values == null
          ? Center(
              child: CircularProgressIndicator(),
            )
          : Container(
              child: _myListView(context, user.conversationID.values),
            ),
    );
  }

这显示错误，因为user.conversationID.values是null 。 它是通过cacheGet( ) function 加载的，其类型为Future <bool> ...所以如果我返回 go 并再次打开相同的屏幕（小部件），则加载该值并且不显示错误。 我尝试使用三元运算符，但在这种情况下它不起作用。

编辑

这是cacheGet function。

  Future<bool> cacheGet() async {
    String token = await getToken();
    var body = jsonEncode({"token": token, "userID": this.firebaseUser.uid});
    var res = await http.post((baseUrl + "/cacheGet"), body: body, headers: {
      "Accept": "application/json",
      "content-type": "application/json"
    });

    if (res.statusCode == 200) {
      this.conversationID = Conversations.fromJson(json.decode(res.body));
      return true;
    }

    return false;
  }

Answer 1

只需使用未来的构建器包装您的小部件。 这是一个示例代码：

FutureBuilder<bool>(
        future: user.cacheGet(),
        builder: (BuildContext context, AsyncSnapshot snapshot){
          if(snapshot.hasData){
            return user.conversationID.values == null
                ? Center(
              child: CircularProgressIndicator(),
            )
                : Container(
              child: _myListView(context, user.conversationID.values),
            );
          }else{
            return Container();
          }
        },
      )

Answer 2

可能是像user.cacheGet(); 不应该在build()内部完成，但initState()可能是一个更好的地方。

我建议查看FutureBuilder （或StreamBuilder ）。 考虑一下您的值如何可能是Future ，然后您的构建例程将使用FutureBuilder ，它将在等待数据时显示CircularProgressIndicator() ，然后在获得数据后您想要的任何其他内容（或者第三种情况是获取数据时出错）。 未来应该在initState()中初始化。