Dart / Flutter: building widget from data obtained using async method - dart

Question

I want to use a LietView.build populated by Widgets that obtain the data from an async method, before the widget is built. Here is my function that collects the data from a website:
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);
}
The function is executed and gathers the data, but the widget building fails with type '_Future' is not a subtype of type 'Widget' of 'child' where
Here is the function that is supposed to build the widget:
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))
],
)
],
),
),
);
}
I tried making this function async as well, and making it wait for the fetchBasicDetails() to finish, so the data is present when it would use it.
I even tried using dynamic fetchBasicData(String URL) async {...} but that didn't help either.
Using Future<Dog> instead of dynamic also causes errors.
How could I make the buildBasicWidget use the fetchBasicData result? Or should I just handle the widget building in the fetchBasicData as a simple workaround?

Answer 1

You need to use a FutureBuilder and add your async function in the future argument otherwise the build method gets called before the data are obtained.
Alternatively do your async request inside initState.