How to wait for a value by using Await - flutter

Question

I'm using Flutter to upload an image to Firebase and have a function submit() that is triggered when I submit the form. On submission, I validate that the submission is accurate and I call the uploadFile function to upload the designated image to Firebase storage and return the URL, which I set to urlForPost.
I want to wait for this urlForPost value to be set before triggering the remainder of the submit() function that uploads this to Firebase. Currently, it is returning a null value for urlForPost. How do I wait for the uploadFile() function to load so that I can prevent urlForPost from being null?
void submit() async {
// First validate form.
if (this._formKey.currentState.validate()) {
_formKey.currentState.save();// Save our form now.
final urlForPost = await uploadFile();
Firestore.instance
.collection('posts')
.document(documentName)
.collection('collection')
.add({
'user': widget.userPoster,
'post': _data.post,
'url': urlForPost,
'timePosted': Timestamp.now(),
});
Firestore.instance.collection('current_goals').document(widget.userPoster).collection(widget.goalType).document(widget.goalID).updateData(
{
'complete': true,
}
);
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Home())); }
}
String downloadUrl;
Future<String> uploadFile() async {
final String rand1 = "${new Random().nextInt(10000)}";
final String rand2 = "${new Random().nextInt(10000)}";
final String rand3 = "${new Random().nextInt(10000)}";
final StorageReference ref = FirebaseStorage.instance.ref().child('${rand1}_${rand2}_${rand3}.jpg');
await ref.putFile(widget.selectedImage).onComplete.then((val) {
val.ref.getDownloadURL().then((val) {
print(val);
downloadUrl = val; //Val here is Already String
});
});
return downloadUrl;
}

Answer 1

You could change your uploadFile method to await for the upload as well.
You use await to make an asynchronous call synchronous. However, if you mix it with .then() methods, you're likely to make parts of it unintentionally asynchronous.
Future<String> uploadFile() async {
final String rand1 = "${new Random().nextInt(10000)}";
final String rand2 = "${new Random().nextInt(10000)}";
final String rand3 = "${new Random().nextInt(10000)}";
// you don't need {} if it's a simple statement, use $stringvar and ${value.toString}
final StorageReference ref = FirebaseStorage.instance.ref().child('$rand1_$rand2_$rand3.jpg');
StorageUploadTask task = ref.putFile(imageFile);
var downloadUrl = await (await task.onComplete).ref.getDownloadURL();
debugPrint("downloadUrl=$downloadUrl");
return downloadUrl.toString();
}
just a suggestion unrelated to your original question
Using 3 random numbers, you're likely to have a collision over time. Consider using the UUID package, the chances of collision are dramatically smaller. :)
Future<String> uploadFile() async {
final String uuid = uuid.v4(); // v4 is random, v1 is time-based
final StorageReference ref = FirebaseStorage.instance.ref().child('$uuid.jpg');
StorageUploadTask task = ref.putFile(imageFile);
var downloadUrl = await (await task.onComplete).ref.getDownloadURL();
return downloadUrl.toString();
}