Flutter GestureDetector with multiple futures - flutter

Question

I got 2 futures. When I press a GestureDetector I want the first to be completed and then run the second one. But it doesn’t work. What can I do to fix the issue?
Here is my code.
GestureDetector(
onTap: () => pickImage(), uploadImageToFirebase(),
),
Future pickImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
_imageFile = File(pickedFile.path);
});
}
Future uploadImageToFirebase(BuildContext context) async {
String fileName = basename(_imageFile.path);
StorageReference firebaseStorageRef =
FirebaseStorage.instance.ref().child('uploads/$fileName');
StorageUploadTask uploadTask = firebaseStorageRef.putFile(_imageFile);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
taskSnapshot.ref.getDownloadURL().then(
(value) => imageUrl = value,
);
}

Answer 1

You can use Future.wait() , It takes a List of Futures and return when all underlying future completes/resolves.
In your code, You can do something like this,
GestureDetector(
onTap: () => pickImageandUploadToFirebase(),
),
The method pickImageandUploadToFirebase() looks like this,
Future<void> pickImageandUploadToFirebase() async {
await Future.wait([
pickImage(),
uploadImageToFirebase(),
]);
}
and you already have the 2 methods pickImage() and uploadImageToFirebase()
Hope this helps, Happy fluttering !

Answer 2

upload this after image pick done,
like this
GestureDetector(
onTap: () => pickImage(context);
),
Future pickImage(context) async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
_imageFile = File(pickedFile.path);
});
uploadImageToFirebase(context);
}
Future uploadImageToFirebase(BuildContext context) async {
String fileName = basename(_imageFile.path);
StorageReference firebaseStorageRef =
FirebaseStorage.instance.ref().child('uploads/$fileName');
StorageUploadTask uploadTask = firebaseStorageRef.putFile(_imageFile);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
taskSnapshot.ref.getDownloadURL().then(
(value) => imageUrl = value,
);
}
also, another option is if you need to call one by one in single method.
then return data from first method "pickImage" after retrun done, you call second "uploadImageToFirebase",