飞镖 /颤动:使用异步方法获得的数据构建小部件

Question

我想使用一个lietview.build，该构建由窗口小部件填充，这些小部件在构建小部件之前从异步方法中获取数据。这是我的功能从网站收集数据：

fetchBasicData(String URL) async {
  final response = await http.get(URL);
  var document = parse(response.body);
  var result = new List<dom.Node>();
  result = document.getElementsByClassName('datas-nev');
  var dogName = result[0].nodes[1].toString();
  result = document.getElementsByClassName('datas-tipus');
  var dogBreed = result[0].nodes[1].toString();
  result = document.getElementsByClassName('datas-nem');
  var dogGender = result[0].nodes[1].toString();
  result = document.getElementsByClassName('datas-szin');
  var dogColor = result[0].nodes[1].toString();
  result = document.getElementsByClassName('datas-kor');
  var dogAge = result[0].nodes[1].toString();
  result = document.getElementsByClassName('pirobox_gall');
  String imageLink;
  imageLink = urlPrefix + result[0].nodes[0].attributes.values.first;
  return new Dog.basic(
      URL,
      dogName,
      dogBreed,
      dogGender,
      dogColor,
      dogAge,
      imageLink);
}

执行功能并收集数据，但是小部件建筑物使用type '_Future' is not a subtype of type 'Widget' of 'child' where

失败

这是应该构建小部件的功能：

buildBasicWidget(String URL) async {
    Dog myDog = await fetchBasicData(URL);
    return new SizedBox(
      width: 500.0,
      height: 400.0,
      child: new Card(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            //Header image row
            new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Expanded(
                    child: new FutureBuilder(
                        future: fetchPortrait(myDog.imageLink),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            return new Image.network(
                              snapshot.data,
                              fit: BoxFit.scaleDown,
                            );
                          } else {
                            if (snapshot.hasError) {
                              return new Text('Hiba');
                            }
                          }
                          return new Center(
                            child: new CircularProgressIndicator(),
                          );
                        }))
              ],
            ), //Header image row
            new Row(
              children: <Widget>[
                new Expanded(
                    child: new Text(
                  dogName,
                  style: new TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0,
                      color: Colors.black),
                ))
              ],
            ),
            new Row(
              children: <Widget>[
                new Expanded(
                    child: new Text(myDog.dogColor +
                        'színű, ' +
                        myDog.dogBreed +
                        ' ' +
                        myDog.dogGender))
              ],
            ),
            new Row(
              children: <Widget>[
                new Expanded(child: new Text('Kora: kb. ' + myDog.dogAge))
              ],
            )
          ],
        ),
      ),
    );
  }

我也尝试使此功能异步，然后使其等待fetchBasicDetails()完成，因此数据在使用时存在。

我什至尝试使用dynamic fetchBasicData(String URL) async {...}，但这也无济于事。使用Future<Dog>代替dynamic也会导致错误。

如何使buildBasicWidget使用fetchBasicData结果？还是我应该将fetchBasicData中的小部件建筑物作为简单的解决方法？

Answer 1

您需要使用FutureBuilder并在future参数中添加async函数，否则build方法在获得数据之前就会调用。

或者在initState中执行异步请求。