How to get a String from an AsyncSnapshot<String> in Flutter FutureBuilder? - async-await

Question

I have an image I would like to load from a NetworkImage(url). I'm populating a Future<String> images; variable from an initial function and now I'm having trouble getting my FutureBuilder to read it as a String. I'm getting the error on the url as "The argument type AsyncSnapshot can not be assigned to the parameter type String" Here is my code...
Future<String> images;
Future<Null> getData() async {
FirebaseUser user = await FirebaseAuth.instance.currentUser;
user = await FirebaseAuth.instance.currentUser;
var userid = user.uid;
await fb.child('users/${userid}').onValue.listen((Event event) {
if (event.snapshot.value != null) {
name = event.snapshot.value['displayName'];
images = event.snapshot.value['image'];
} else {
name = "MyFavKPop";
}
});
}
new FutureBuilder<String>(
future: images, // a Future<String> or null
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return new Text('Press button to start');
case ConnectionState.waiting: return new Text('Awaiting result...');
default:
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else
return new CircleAvatar(
backgroundImage: new NetworkImage(snapshot.data.toString()) // getting NetworkImageError ..looking for String not Future<String>,
radius: 75.0,
);
}
}),

Answer 1

The resulting data is the AsyncSnapshot.data, not the instance of the snapshot itself. In your example, the cases should be:
switch (snapshot.connectionState) {
case ConnectionState.none:
return new Text('Press button to start');
case ConnectionState.waiting:
return new Text('Awaiting result...');
default:
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else {
return new CircleAvatar(
backgroundImage: new NetworkImage(snapshot.data),
radius: 75.0,
);
}
}
EDIT: The second issue is that you are not creating images correctly - you are assigning a String to a Future. Instead try using a completer to create a Future when your getData method finishes running.
Completer<String> _imageCompleter = new Completer<String>();
Future<String> get images => _imageCompleter.future;
Future<Null> getData() async {
...
_imageCompleter.complete(event.snapshot.value['image']);
}