converting a single image stored in a List<String> and display it as an image-CodePudding

I'd like to ask on how do I display a single image that is stored in a List. I am using the same arrayList for multi-image picker and single image picker.

I do get this error when I am trying to display the image as File(imagePath)

The argument type 'List<String>' can't be assigned to the parameter type 'String'.

However it does change when I am adding File(imagePath.toString()).

════════ Exception caught by image resource service ════════════════════════════ Cannot open file, path = '[/data/user/0/package_name/cache/image_cropper_1675327578829.jpg]' (OS Error: No such file or directory, errno = 2)

This is my code.

// where I store my Image
List<String> imagePath = []

Future selectFile() async {
    try {
      final image = await ImagePicker().pickImage(source: ImageSource.gallery);
      if (image != null) {
        final croppedImage = await ImageCropper().cropImage(
          sourcePath: image.path,
          aspectRatio: const CropAspectRatio(ratioX: 1, ratioY: 1),
          compressQuality: 100,
          maxWidth: 450,
          maxHeight: 450,
          compressFormat: ImageCompressFormat.jpg,
          aspectRatioPresets: [CropAspectRatioPreset.square],
        );
        setState(() {
// I have stored the cropeedImage in imagePath
          imagePath.add(croppedImage!.path);
        });
      }
    } on PlatformException catch (e) {
      print(e.message);
    }
  }

I am trying to display the image here in the column..

Column(
          // constraints: BoxConstraints.expand(),
          // color: Colors.blue[100],
          children: [
            Center(
                child: Image.file(
// I do get an error here, altho it shows the whole path in my emulator device.
              File(imagePath.toString()),
              width: double.infinity,
              height: 300,
              fit: BoxFit.cover,
            )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  selectFile();
                },
                child: const Text("Select a Photo")),
          ])

CodePudding user response：

If you like to show the first image of the list, you can do

 File(imagePath.first)

Or pass the index you like to show.