Flutter应用加载不足4张图片时触发RangeError (index): Invalid value问题求助

Hey there, let's sort out this RangeError you're hitting when users upload fewer than 4 photos!

The Root Cause #

Your current code assumes serviceRequest.getPhotos always has at least 4 elements (even if some are null), but that's not the case. When a user uploads, say, 2 photos, the list only has 2 items. Trying to access indices 2 or 3 directly throws a RangeError because those positions don't exist in the list at all—you're only checking if the element at that index is null, not if the list is long enough to have that index in the first place.

Solution 1: Safely Prepare the Photo List #

First, we'll create a fixed-length list of 4 elements, filling any unused slots with null. This ensures we always have valid indices 0-3 to work with:

// Prepare a 4-item list, filling existing photos and nulls for empty slots
final List<String?> displayPhotos = List.filled(4, null);
if (serviceRequest.getPhotos != null) {
  // Only copy up to 4 photos (since that's our max)
  for (int i = 0; i < serviceRequest.getPhotos!.length && i < 4; i++) {
    displayPhotos[i] = serviceRequest.getPhotos![i];
  }
}

Solution 2: Reusable Photo Widget (Cleaner Code) #

Next, let's extract the photo rendering logic into a reusable widget to avoid repetitive code:

Widget buildPhotoTile(String? base64Photo) {
  if (base64Photo == null) {
    // Use SizedBox.shrink() instead of Stack for a lighter empty placeholder
    return const SizedBox.shrink();
  }
  return Padding(
    padding: const EdgeInsets.all(10.0),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Image.memory(
        const Base64Decoder().convert(base64Photo),
        width: pictureWidth,
        height: pictureHeight,
        fit: BoxFit.cover,
      ),
    ),
  );
}

Final UI Implementation #

Now plug these into your Column to render the photos safely:

Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        buildPhotoTile(displayPhotos[0]),
        buildPhotoTile(displayPhotos[1]),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        buildPhotoTile(displayPhotos[2]),
        buildPhotoTile(displayPhotos[3]),
      ],
    ),
  ],
)

Alternative Quick Fix (Without List Preparation) #

If you prefer not to pre-process the list, you can check both the list length and element existence before rendering each photo:

// Example for index 0
serviceRequest.getPhotos != null 
    && serviceRequest.getPhotos!.length > 0 
    && serviceRequest.getPhotos![0] != null 
  ? buildPhotoTile(serviceRequest.getPhotos![0]) 
  : const SizedBox.shrink()

But the first approach is cleaner, especially since you're dealing with a fixed max of 4 photos.

内容的提问来源于stack exchange，提问作者PedroCova