Flutter Firebase Storage Data doesn't show Data immediately

Issue

I'm currently working on a project in flutter where I want to store uploaded Data in Firebase Storage. This works fine but now I'm facing a problem with showing the data. I have to do a restart for showing the uploaded Data in my List.

I hope someone can help me with this issue.

onPressed: () async {
  FilePickerResult? result = await FilePicker.platform
      .pickFiles(allowMultiple: true);
  if (result == null) return;

  final path = result.files.single.path!;

  setState(() {
    
  });
  final fileName = result.files.single.name;

  storage
      .uploadFile(path, fileName)
      .then((value) => print('Done'));
},

This is my call function when pressing the button.

Future<void> uploadFile(String destination, String fileName) async {
    final User? user = auth.currentUser;
    final uid = user!.uid;
    File file = File(destination);
    try {
      await storage.ref('$uid/$fileName').putFile(file);
    } on firebase_core.FirebaseException catch (e) {
      print(e);
    }
  }

This is my method for pushing the data into firebase storage.

Container(
  width: MediaQuery.of(context).size.width - 15,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(25),
  ),
  child: FutureBuilder(
    future: _loadImages(),
    builder: (context,
        AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return Row(
          children: [
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: snapshot.data?.length ?? 0,
                itemBuilder: (context, index) {
                  final Map<String, dynamic> image =
                      snapshot.data![index];

                  return Card(
                    shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.circular(20)),
                    elevation: 0,
                    child: ListTile(
                      dense: false,
                      contentPadding: EdgeInsets.all(15),
                      leading: Image.network(
                        image['url'],
                      ),
                      trailing: IconButton(
                        onPressed: () => _delete(image['path']),
                        icon: const Icon(
                          Icons.delete,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );
      }

      return const Center(
        child: CircularProgressIndicator(),
      );
    },
  ),
),

And this is how I display my files in my app.

Looking forward for some help.

I want to see my data directly when uploading it into Firebase Storage.

Solution

If you want to show the newly uploaded image right away, you will have to force a refresh of the code that renders the list of images. If you're using a StatefulWidget to render the images, you could for example call setState() on that widget after the upload has completed. If you're using another state management approach, you'd do the equivalent for that approach.

But note that this will only work on the device of the user who uploaded the image. Any other devices will still only see the new image if they manually restart the rendering of the list of images.

A common way to work around this is to store the list of image URLs in one of Firebase's databases (Realtime Database or Cloud Firestore), and render it from there with a StreamBuilder. The StreamBuilder continues to listen for updates to the database, so if one user's image upload completes and they write the URL/path of the image to the database, that immediately refreshes the list of images not just on their device, but on all other connected devices too.

Answered By - Frank van Puffelen