How to delete image path from list of currently selected photo?-CodePudding

I need a button to delete the currently viewed image. The image paths are stored in a List<String>. The images appear via CarouselSlider from ImagePicker.

I've tried to see if I can delete the image via a hardcoded index with .removeAt() and that works but again, can't figure how to get current image

What is right way to grab the current index of the on screen image? I've tried with single images and it works find but getting the current index of the currently viewed photo is where I'm running into trouble.

This is how I am getting my Images:

 List<String> pickedImageList = [];
  final imagePicker = ImagePicker();

  Future pickImage() async {
    final userPickedImages = await imagePicker.pickMultiImage();
    for (var image in userPickedImages!) {
      pickedImageList.add(image.path);
    }
    setState(() {});
  }

This is how I am showing the images. Button to delete currently selected photo is at the bottom with generic function:

Column(
  children: [
    ElevatedButton(
        onPressed: pickImage,
        child: const Text('Add another image')),
    CarouselSlider(
      options: CarouselOptions(
        // height: 200,
        viewportFraction: .9,
        enlargeCenterPage: true,
      ),
      items: pickedImageList
          .map(
            (item) => SizedBox(
              width: 200,
              height: 200,
              child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.asset(
                    item,
                    height: 200,
                    width: 200,
                  )),
            ),
            // color: Colors.green,
          )
          .toList(),
    ),
    ElevatedButton(
        onPressed: () {
          setState(() {
            removeImage();
          });
        },
        child: const Text('Remove'))
  ],
),

All of the delete buttons that people have solved on SO all involve single images which is not the problem.

I thought maybe a GestureDetector counting up and down with left and right swipes, resetting the counter when it reaches the length of the list. Negatives would be multiplied by it self to get current index usable.

CodePudding user response：

To get the index of the currently viewed photo in the CarouselSlider widget, you can use the onPageChanged callback property to update a _currentPage variable with the current page index. Then, you can use the _currentPage variable to delete the currently viewed photo from the pickedImageList list.

Here's an example of how you could implement this:

// Initialize the _currentPage variable with the first photo in the list
int _currentPage = 0;

// In the CarouselSlider widget, set the onPageChanged callback property
CarouselSlider(
  options: CarouselOptions(
    // height: 200,
    viewportFraction: .9,
    enlargeCenterPage: true,
    // Set the onPageChanged callback property
    onPageChanged: (index, reason) {
      // Update the _currentPage variable with the current page index
      setState(() {
        _currentPage = index;
      });
    },
  ),
  items: pickedImageList
      .map(
        (item) => SizedBox(
          width: 200,
          height: 200,
          child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Image.asset(
                item,
                height: 200,
                width: 200,
              )),
        ),
        // color: Colors.green,
      )
      .toList(),
),

// In the delete button, use the _currentPage variable to remove the currently viewed photo from the pickedImageList list
ElevatedButton(
    onPressed: () {
      setState(() {
        pickedImageList.removeAt(_currentPage);
      });
    },
    child: const Text('Remove')
)

In this example, the onPageChanged callback will be called every time the user swipes to a new photo in the CarouselSlider widget. The callback will update the _currentPage variable with the index of the current page, which you can then use to delete the currently viewed photo from the pickedImageList list.

I hope this helps! Let me know if you have any other questions.