How to retreive a image URL from Firebase Storage in Flutter?

Question

In Flutter, I registered an image in a collection under the name 'parts_sales', and I want to load this image url through image.network(url). However, I tried to print the url with print(url), but an error message saying that this url could not be found with the code I wrote is displayed.

Below is the full code.

import 'dart:io';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:shipda/constants.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:image_picker/image_picker.dart';
import 'package:shipda/screens/parts_screen/image_container.dart';

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  void initState() {
    super.initState();
    getData();
  }

  final FirebaseAuth auth = FirebaseAuth.instance;
  User? user = FirebaseAuth.instance.currentUser;
  final FirebaseFirestore firestore = FirebaseFirestore.instance;

  var resultData;
  var documentID;
  var imageUrl;

  // Get a document ID
  void getData() async {
    var querySnapshots = await collection.get();
    for (var snapshot in querySnapshots.docs){
      documentID = snapshot.id; // <-- document ID
    }

    var result = await firestore
        .collection('parts_sales')
        .doc(documentID)
        .get();

    setState(() {
      resultData = result.data();
    });

    var ref = FirebaseStorage.instance.ref().child('${resultData?['parts_image']}');
    // String url = (await ref.getDownloadURL().toString());
    var url = await ref.getDownloadURL();

    print(documentID);
    print(url);
  }

  var collection = FirebaseFirestore.instance.collection('parts_sales');


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: primary100,
        title: Text('Welcome To Test Mode'),
      ),
      body: Column(
        children: [
          Text('${resultData?['title']}'),
          Text('${resultData?['category']}'),
          Text('${resultData?['parts_image']}'),

        ],
      ),
    );
  }
}

The below is the error message.

[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: [firebase_storage/object-not-found] No object exists at the desired reference.
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:653:7)
#1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:296:18)
<asynchronous suspension>
#2      MethodChannel.invokeMapMethod (package:flutter/src/services/platform_channel.dart:499:43)
<asynchronous suspension>
#3      MethodChannelReference.getDownloadURL (package:firebase_storage_platform_interface/src/method_channel/method_channel_reference.dart:45:36)
<asynchronous suspension>
#4      _TestState.getData (package:project/test.dart:52:15)

Above image is Firebase Storage

Above image is Cloud Firestore collection document data

I think I entered the code to get the correct url, var ref = FirebaseStorage.instance.ref().child('${resultData?['parts_image']}'); and var url = await ref.getDownloadURL(); but I can't solve it at all. What should I do?

Can you share the code you used to upload images to collection? Meanwhile, Check this [thread1](https://stackoverflow.com/a/67652579/18265570) & [thread2](https://stackoverflow.com/a/71623890/18265570) — Roopa M, Jan 02 '23 at 09:56

score 2 · Answer 1 · answered Jan 02 '23 at 12:52

2

`setState((){});` works asynchronously

Your problem might be you are using resultData before it is set.

setState(() {
      resultData = result.data();
});
var ref = FirebaseStorage.instance.ref().child('${resultData?['parts_image']}');  resultData might not be set just yet

Change it to :

var ref = FirebaseStorage.instance.ref().child('${result.data()?['parts_image']}');

answered Jan 02 '23 at 12:52

krishnaacharyaa

14,953
4
49
88

I tried as you suggetest but it has error. Unhandled Exception: NoSuchMethodError: The method 'data' was called on null. – HappyCoding Jan 03 '23 at 04:05
it means `result` is null, i.e the document is not fetched properly from the firestore, try `print(result)` before using `result.data()` – krishnaacharyaa Jan 03 '23 at 04:07

How to retreive a image URL from Firebase Storage in Flutter?

1 Answers1

setState((){}); works asynchronously

`setState((){});` works asynchronously