Dart / flutter: String data from initState can't be passed via setState - dart

Question

Yesterday I made a simple widget that fetches data to display some basic info, but I noticed that when I pop back to the list, the data is usually absent and I only get my error texts.
I figured this is due to these widgets originally being stateless, so I'm trying to convert them to stateful in order to reload the data when the page is loaded.
This is how I gather the data for my widget:
class BasicDogWidget extends StatefulWidget {
String URL;
BasicDogWidget(this.URL);
#override
createState() => new BasicDogWidgetState(URL);
}
class BasicDogWidgetState extends State<BasicDogWidget> {
String URL;
BasicDogWidgetState(this.URL);
var result;
var imageLink;
var dogName;
var dogType;
var dogColor;
var dogGender;
var dogAge;
#override
initState() {
fetchImageLink(URL).then((result) {
setState(imageLink = result);
});
fetchDogInfo(URL, 'datas-nev').then((result) {
setState(dogName = result);
});
fetchDogInfo(URL, 'datas-tipus').then((result) {
setState(dogType = result);
});
fetchDogInfo(URL, 'datas-szin').then((result) {
setState(dogColor = result);
});
fetchDogInfo(URL, 'datas-nem').then((result) {
setState(dogGender = result);
});
fetchDogInfo(URL, 'datas-kor').then((result) {
setState(dogAge = result);
});
super.initState();
}
#override
Widget build(BuildContext context) {
if (imageLink == null) {
return new Container();
}
if (dogName == null) {
return new Container();
}
if (dogType == null) {
return new Container();
}
if (dogColor == null) {
return new Container();
}
if (dogGender == null) {
return new Container();
}
if (dogAge == null) {
return new Container();
}
return buildBasicWidget(
imageLink, dogName, dogType, dogColor, dogGender, dogAge, URL);
}
}
However, it seems that the data collected by fetchDogInfo can't be passed in the setState method as it is a string.
E/flutter (12296): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception:
E/flutter (12296): type 'String' is not a subtype of type 'VoidCallback' of 'fn' where
E/flutter (12296): String is from dart:core
E/flutter (12296):
E/flutter (12296): #0 State.setState (package:flutter/src/widgets/framework.dart:1086)
E/flutter (12296): #1 BasicDogWidgetState.initState.<anonymous closure> (package:osszefogasaszanhuzokert/dog.dart:230)
Is there any way this issue can be bypassed?

Answer 1

You are executing async code
fetchImageLink(URL).then((result) {
which means fetchImageLink(URL) will eventually return a value and then then(...) is executed, but this call is async, which means it's added to the event queue for later execution and the code synchronically continues to execute until the end of initState and then build until this sync code is run to its completion, then the next "task" from the event queue is executed, which might be the then(...) part from your fetchImageLink() call if it already completed.
That shouldn't be a problem though.
You could just check if the value is available
#override
Widget build(BuildContext context) {
if(imageLink == null) {
return new Container(); // dummy widget until there is something real to render
}
... // your other build code

Answer 2

Flutter have FutureBuilder class. It provides a widget that does all the heavy lifting to support asynchronous Future objects. The nice thing about FutureBuilder is that is can be added directly to the widget tree, and based off the current status of the connection, the relevant UI can be displayed to indicate progress, a result or an error.
Example:
class JokePageState extends State<JokePage> {
Future<String> response;
initState() {
super.initState();
response = http.read(dadJokeApi, headers: httpHeaders);
}
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new FutureBuilder<String>(
future: response,
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return const Icon(Icons.sync_problem);
case ConnectionState.waiting:
case ConnectionState.active:
return const CircularProgressIndicator();
case ConnectionState.done:
final decoded = json.decode(snapshot.data);
if (decoded['status'] == 200) {
return new Text(decoded['joke']);
} else {
return const Icon(Icons.error);
}
}
},
),
),
);
}
}