flutter displaying different types of images in child

Question

I am doing something funky. The user is allowed to choose images from his phone's gallery or take a picture with his camera.

I then upload that image to Firebase storage and retrieve the URL to save it to firestore, so that I can reference that image when the user wants to edit his selections.

That portion works great.

When the edit page opens, there is a quick error that displays, but the image still displays. I want to get rid of that "quick error".

this is the error I get before the image is loaded:

RangeError (index): Invalid value: Valid value range is empty: 0

the other problem I do not know what image is being loaded into my variable it can a FILE (user can change the image from his gallery/camera) or a string (URL from firestore, displaying image that was previously selected)

my wonderful nested:

child: (imageFile1 != null)
                    ? Image.file(
                        imageFile1,
                        width: (size.width - 8 * 4) * 0.33,
                        fit: BoxFit.cover,
                      )
                    : (imageList[0] == null)
                        ? Image.asset(
                            defaultImage,
                            width: (size.width - 8 * 4) * 0.33,
                            fit: BoxFit.cover,
                          )
                        : Image.network(
                            imageList[0],
                            width: (size.width - 8 * 4) * 0.33,
                            fit: BoxFit.cover,
                          ),

imagelist gets loaded in the initstate (Therefore, I have a method with Future and await involved to go fetch that information from firetsore) imageFile1 gets loaded when the user decides to change the image to another one from his gallery/camera default image, if both are null then display missing image jpg.

I tried debugging and it seems the scaffold is being called before the initstate??? Which is strange to me...

Thoughts?

Answer 1

We could avoid address this issue by the means of a CircularProgressIndicator that will be drawn while the imageList[] is empty:

child: imageList == null || imageList.isEmpty() ? CircularProgressIndicator() : _buildImageFiles(),