FutureBuilder not waiting for async function to load - flutter

Question

Edit 3: Here's what it looks like now
#override
void initState() {
super.initState();
myFuture = genCode();
}
Future<Uint8List> genCode() async {
print('This should be the start')
Obj o = await _getAsyncData();
print('This should be the end');
return await scanner.generateBarCode(o.str);
}
Future<Obj> _getAsyncData() async {
Obj o = await addObj();
print('Hello');
print(o.str);
return o;
}
Future<Obj> addObj() async {
final String url = 'APIURL';
final client = new http.Client();
final response = await client.post(
url,
headers: {HttpHeaders.contentTypeHeader: 'application/json',
);
print('Obj added. Received response.');
Obj o = Obj.fromJSON(json.decode(response.body));
print(o.str);
return o;
}
Prints
I/flutter (12991): This should be the start
I/flutter (12991): This should be the end
I/flutter (12991): Obj added. Received response.
I/flutter (12991): 12345
I/flutter (12991): Hello
I/flutter (12991): 12345
FutureBuilder widget goes straight to this block of code
if (snapshot.hasError) {
children = <Widget>[
Icon(
Icons.error_outline,
color: Colors.red,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('Error: ${snapshot.error}'),
)
];
}
It shows the exclamation mark and prints on screen:
Error: NoSuchMethodError: The getter 'str' was called on null.
Receiver: null
Tried calling: str
Somehow it's ignoring the fact that the async function is still running in the background.
FutureBuilder(
future: myFuture, // a previously-obtained Future<String> or null
builder: (BuildContext context, AsyncSnapshot snapshot) {
List<Widget> children;
if (snapshot.hasData) {
children = <Widget>[
QRDisplayWidget(title: '', bytes: snapshot.data),
];
} else if (snapshot.hasError) {
children = <Widget>[
Icon(
Icons.error_outline,
color: Colors.red,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('Error: ${snapshot.error}'),
)
];
} else {
children = <Widget>[
SizedBox(
child: CircularProgressIndicator(),
width: 60,
height: 60,
),
const Padding(
padding: EdgeInsets.only(top: 16),
child: Text('Awaiting result...'),
)
];
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: children,
),
);
},
),
Original Code:
Error: The argument type 'Future Function(BuildContext,
AsyncSnapshot)' can't be assigned to the parameter type 'Widget Function(BuildContext, AsyncSnapshot)'.
What am I missing? The code is exactly the same as the docs
FutureBuilder<String>(
future: getQRStr(), // a previously-obtained Future<String> or null
builder: (BuildContext context, AsyncSnapshot<String> snapshot) async {
List<Widget> children;
if (snapshot.hasData) {
children = <Widget>[
QRDisplayWidget(title: '', bytes: getBytes(snapshot)),
];
} else if (snapshot.hasError) {
children = <Widget>[
Icon(
Icons.error_outline,
color: Colors.red,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('Error: ${snapshot.error}'),
)
];
} else {
children = <Widget>[
SizedBox(
child: CircularProgressIndicator(),
width: 60,
height: 60,
),
const Padding(
padding: EdgeInsets.only(top: 16),
child: Text('Awaiting result...'),
)
];
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: children,
),
);
},
),
Edit: So I got the FutureBuilder to stop throwing the error, but the String value is still retrieved before the data is fetched.
Future<String> getQRStr() async{
String str = await _asyncFetchData();
return Future.value(str); // return your response
}
Future<Uint8List> getBytes(AsyncSnapshot snapshot) async{
return await scanner.generateBarCode(snapshot.data);
}
Edit 2:
I edited it to what I have right now. If I use Future on getBytes, I get Error: The argument type 'Future<Uint8List>' can't be assigned to the parameter type 'Uint8List'. Removing Future makes it run compile without errors but the app seems to be thrown into a state of perpetual refresh, constantly calling getQRStr().
Under the _asyncFetchData function, I have a print function that prints the data after successfully retrieving it before returning the value. That prints fine. But FutureBuilder prints that the value returned is null.

Answer 1

You cannot pass a Future to the builder parameter of the FutureBuilder. You can't await on anything in the builder.
As a solution you can make a new function like below and pass that to the FutureBuilder.
Future<Uint8List> genCode() async {
return await scanner.generateBarCode(await getQRStr());
}
Other parts:
#override
void initState() {
super.initState();
myFuture = genCode();
}
......
FutureBuilder(
future: myFuture,
builder: (BuildContext context, AsyncSnapshot snapshot) {
List<Widget> children;
if (snapshot.hasData) {
children = <Widget>[
QRDisplayWidget(title: '', bytes: snapshot.data),
];
} else if (snapshot.hasError) {
children = <Widget>[
Icon(
Icons.error_outline,
color: Colors.red,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('Error: ${snapshot.error}'),
)
];
} else {
children = <Widget>[
SizedBox(
child: CircularProgressIndicator(),
width: 60,
height: 60,
),
const Padding(
padding: EdgeInsets.only(top: 16),
child: Text('Awaiting result...'),
)
];
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: children,
),
);
},
),

Answer 2

Delete async from your code then try again please.
But in this case you need to handle your QRDisplayWidget widget because it has await function for bytes, but you can declare it outside of builder then call it, something like below.
getBytes()async{
var snaphot.data;
await scanner.generateBarCode(snapshot.data)
}
FutureBuilder<String>(
future: getQRStr(), // a previously-obtained Future<String> or null
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
List<Widget> children;
if (snapshot.hasData) {
children = <Widget>[
QRDisplayWidget(title: '', bytes: getBytes()),
];
} else if (snapshot.hasError) {