Dislaying Image File in Container Exported From Video

Trying to export a frame from my video file, save it to an image file list, and then display it back when building my list of containers.

setState(() async{
      if (result!.files.isNotEmpty) {
        for (PlatformFile item in result.files) {
          videos.add(File(item.path!));
          var duration = Duration(seconds: 1);
          File image = await ExportVideoFrame.exportImageBySeconds(File(item.path!), duration, 0);
          videoThumbs.add(image);
          //tickets[widget.indexEvent].videos[i]
        }
      } else {}
    });

Then later in my page class I am trying to display it back for the user in a child of my container:

child:Image.file(
                  videoThumbs[i],
                  width: 100,
                  height: 100,
                  fit: BoxFit.fill,
                 ),

The code doesn't hard fail, and will build the apk, but when in the app, my thumbnail just says:

As you can see from my thumbnail, my list of photos and videos are building, but when it tries to loop through the videos and show a thumb, the array index is empty, I think? I believe I'm reading that error right.

I have seriously been at this for 2 weeks, and I could really use some help.