Flutter firebase: Upload ImageUrl to firebaseDatabase

Question

I'm trying to to make a user send pic to firebase. The image is stored in the firestore alright. But I don't seem to get the downloaded imageUrl to the database. Anytime it happens, the field (the field name is 'Document', which is a subcollection of the collection "users")just gives me something like this (Document: ""). What I'm I doing wrong?

my pic

user collection Document subcollection

this is my code:

class _ImageVerificationScreenState extends 
State<ImageVerificationScreen> {
  File? image;
  String? imageUrl = '';
  Future<File> customCompressed(
      {required File imagePathToCompress,
      quality = 100,
      percentage = 10}) async {
    var path = await FlutterNativeImage.compressImage(
        imagePathToCompress.absolute.path,
        quality: 100,
        percentage: 80);
    return path;
  }
  Future<File?> pickImages(BuildContext context) async {
    File? image;
    try {
      final pickedImage =
          await ImagePicker().pickImage(source: ImageSource.camera);
      if (pickedImage != null) {
        image = File(pickedImage.path);
        File compressedImage =
            await customCompressed(imagePathToCompress: image);
        setState(() {
          image = compressedImage;
        });
      }
    } catch (e) {
      showSnackBar(context, e.toString());
    }
    return image;
  }
  void uploadImage() async {
    String uid = FirebaseAuth.instance.currentUser!.uid;
    Reference ref = FirebaseStorage.instance.ref();
    Reference refDirImage = ref.child('Documents');
    Reference refImageUpload = refDirImage.child(uid);
    try {
      await refImageUpload.putFile(File(image!.path));
      imageUrl = refImageUpload.getDownloadURL().toString();
    } catch (error) {
      return;
    }
  }

  Future<String?> documentID() async {
    String uid = FirebaseAuth.instance.currentUser!.uid;
    CollectionReference document =
        FirebaseFirestore.instance.collection('users');
    document.doc(uid).collection('Documents').add({'Document': 
imageUrl});
    return imageUrl;
  }
  void selectImage() async {
    image = await pickImages(context);
  }

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    return SafeArea(
      child: Scaffold(
....
UI part deleted
...
              TextButton(
                  onPressed: () {
                    uploadImage();
                    documentID();
                  },
                  child: const Text(
                    'Upload document',
                    style: TextStyle(fontSize: 20, fontWeight: 
                    FontWeight.bold),
                  ))
          ],
        )),
      ),
    );
  }
}

Answer 1

Replace this line:

      imageUrl = refImageUpload.getDownloadURL().toString();

to this:

      this.imageUrl = await refImageUpload.getDownloadURL().toString();

To wait to get image URL. And also use instance variable (image,imageUrl) with this, like above. It works for me hopefully yours (don't forget to vote ️).