如何确保在 Widget 构建之前加载异步函数？

Question

我有一个屏幕，其中包含有关用户的一些信息。

在我的构建小部件中我有这个：

Column
 (
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>
    [
    Text('User Points', style: TextStyle(color: Colors.blueAccent)),
    Text('${this.user.points}', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 34.0))
    ],
 ),

我有一个功能可以在用户每次访问仪表板时更新仪表板。

void updateDashboard() async{
    SharedPreferences prefs = await SharedPreferences.getInstance();
    var api_key = prefs.getString('api_key');
    var userID = prefs.getInt('userID');

    var res = await http.post(('http://myApp.com/getDashboardPreferences/'+userID.toString() + '/' + api_key),
        headers: {
          "Accept": "application/json",
          "content-type": "application/json"
        });

    this.user = User.fromJson(json.decode(res.body));

    setState(() {
      if (res.statusCode == 200) { 
        this.user.setPoints(this.user.points);
      } else {
        print("Something is wrong");
      }
    });

  }

在 initstate 中我调用该函数：

@override
  void initState() {
    updateDashboard();
    super.initState();
  }

这是可行的，但是，我得到了${this.user.points}几null秒钟的时间（我得到了警告屏幕），然后它被加载，一切都很好。我想这是因为我的函数是async......但是我如何确保updateDashboard()在渲染之前调用它Widget build()？

Answer 1

如果你不想使用FutureBuilder那么你可以做类似的事情

if(done)
    Column(  /* whatever */ )
else
    Center(child: CircularProgressIndicator())

void updateDashboard() async{
    /* whatever */

     if (res.statusCode == 200) { 
        setState(() {
           this.user.setPoints(this.user.points);

           done = true;

      });          
 }

@override
  void initState() {
    /* whatever */
    done = false;
  }