RangerError (index): Invalid value

Issue

I'm doing an app that the users can load up to 4 images to better describe the work they need, but load images is optional, at the end of the service request, I have a summary page that show everything the user ask for, including the pictures, but I get the RangerError (index): Invalid value for any value of the list that keep the pictures that don't have a value on it (this happen when the user not select 4 pictures). The images show correct when the user select 4 images, but less than 4 give me this problem, can someone help me on this?

Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      serviceRequest.getPhotos?[0] == null
                          ? Stack()
                          : Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(20),
                                child: Image.memory(
                                  const Base64Decoder()
                                      .convert(serviceRequest.getPhotos![0]),
                                  width: pictureWidth,
                                  height: pictureHeight,
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                      serviceRequest.getPhotos?[1] == null
                          ? Stack()
                          : Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(20),
                                child: Image.memory(
                                  const Base64Decoder()
                                      .convert(serviceRequest.getPhotos![1]),
                                  width: pictureWidth,
                                  height: pictureHeight,
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      serviceRequest.getPhotos?[2] == null
                          ? Stack()
                          : Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(20),
                                child: Image.memory(
                                  const Base64Decoder()
                                      .convert(serviceRequest.getPhotos![2]),
                                  width: pictureWidth,
                                  height: pictureHeight,
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                      serviceRequest.getPhotos?[3] == null
                          ? Stack()
                          : Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(20),
                                child: Image.memory(
                                  const Base64Decoder()
                                      .convert(serviceRequest.getPhotos![3]),
                                  width: pictureWidth,
                                  height: pictureHeight,
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                    ],
                  ),
                ],
              ),

Solution

If the list has less than 4 elements and you're asking for an element the 4th one it will return a range error. From what I've seen, you thought it would return null, but that's not the case.

To fix the issue you have to options (based on what you're trying to achieve):

1. Look into ListView builders and check if they work for what you want.

2. Instead of asking for the nth element in the list to check if it exists, compare the length of the list with the index you're trying to get. If the index is greater or equal to the length, return that stack widget. Other wise the other one.

PS: I'm not sure about the last part, if you can, just use the ListView builder.

https://docs.flutter.dev/cookbook/lists/long-lists

Answered By - Robert Pietraru