Mapping List Images into container to view them shows the same pic in all of the containers-CodePudding

I'm using the image package in order to crop an image with 3 different coordinates but the result that the images that are cropped are display the same.

 finalCroppedImage.isNotEmpty
              ? finalCroppedImage.map((Image) { //Instance of image from Image package
                  print(Image.height); //here i have different values for the images
                  print(Image.width);

                  File imageFinal = File(mainImage!.path);
                  File(mainImage!.path).writeAsBytesSync(encodePng(Image)); // I'm trying to decode it to display in the container

                  return Container(
                    height: 300,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            fit: BoxFit.fitWidth,
                            image: FileImage(File(mainImage!.path)))),
                  );
                }).toList()
              : [Text('Empty')],

CodePudding user response：

You're using the same name for all the images, change your code to this:

finalCroppedImage.isNotEmpty
              ? finalCroppedImage.map((image) { //Instance of image from Image package
                  print(image.height); //here i have different values for the images
                  print(image.width);

                  File imageFinal = File(image!.path);
                  File(imageFinal!.path).writeAsBytesSync(encodePng(image)); // I'm trying to decode it to display in the container

                  return Container(
                    height: 300,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            fit: BoxFit.fitWidth,
                            image: FileImage(File(imageFinal!.path)))),
                  );
                }).toList()
              : [Text('Empty')],