Dart Component: How to return result of asynchronous callback? - asynchronous

Question

Hey there I am quite new to Dart Futures and I have the following situation.
Whenever a user types a letter in the UI the addressChanged() method in my ui_component is called. This method calls the method getProposals() in my maps componenet which does an asynchronous request to the google maps API. As soon as the results are here I want to return them to the UI Component which is going to populate the propasals dropdown in the UI.
I am stuck with the last step: How (and whats the best way) to return the results of an asynchronous callback function to a parent component (while keeping an reusable maps component?).
This is what I have tried:
1) UI_Component:
// I get called if a user typed a new letter
Future addressChanged(dynamic event) async {
String id = event.target.id;
String address = event.target.value;
if(id=="pickup") {
this.pickup = address;
} else if(id=="destination") {
this.destination = address;
}
// this is where I call the subcomponent and want to get the address propasals
String proposals = await googleMap.getProposals(address,id);
print(proposals);
populateProposalDropdown();
}
2) Google Map component:
Future getProposals(String address,String id) async {
await _getProposals(address,id);
}
Future _getProposals(String address,String id) async {
if(address != "") {
autocompleteService.getPlacePredictions(
new AutocompletionRequest()
..input = address
,
(predictions,status) {
List<String> result = [];
if(status == PlacesServiceStatus.OK) {
predictions.forEach(
(AutocompletePrediction prediction) =>
result.add(prediction.description)
);
}
// HERE is the problem: How do I return this result from the callback as a result of the getProposals method?
return result;
}
);
}
}

Answer 1

This method doesn't return any data
Future getProposals(String address,String id) async {
await _getProposals(address,id);
}
Change it to
Future getProposals(String address,String id) {
return _getProposals(address,id);
}
This would also work, but here async and await is redunant
Future getProposals(String address,String id) async {
return await _getProposals(address,id);
}
For _getProposals you can use a Completer
Future _getProposals(String address,String id) async {
if(address != "") {
Completer completer = new Completer();
autocompleteService.getPlacePredictions(
new AutocompletionRequest()
..input = address
,
(predictions,status) {
List<String> result = [];
if(status == PlacesServiceStatus.OK) {
predictions.forEach(
(AutocompletePrediction prediction) =>
result.add(prediction.description)
);
}
// HERE is the problem: How do I return this result from the callback as a result of the getProposals method?
completer.complete(result);
}
);
return completer.future;
}
return null;
}