title: Flutter add images in carousel with known position
body: <p>I currently have a carousel in flutter where I can add and delete images, but the problem is that I can add after the last picture in the carousel.</p>
  <p>Likewise I can delete just the last picture, in order.</p>
  <p>How can I choose what picture to delete or where to add it based on the user position in the carousel?</p>
  <p>I use two buttons, one for adding the pictures and another for deleting them, by calling specific methods ( a method for add, another for delete ).</p>
  <p>Here is the code</p>
  <pre><code>import 'dart:io';
  
  import 'package:carousel_slider/carousel_slider.dart';
  import 'package:flutter/material.dart';
  import 'package:font_awesome_flutter/font_awesome_flutter.dart';
  import 'package:image_picker/image_picker.dart';
  
  class ProductCarousel extends StatefulWidget {
    @override
    _ProductCarouselState createState() =&gt; _ProductCarouselState();
  }
  
  class ImageConfig {
    String source;
    String path;
  
    ImageConfig({this.source, this.path});
  }
  
  class _ProductCarouselState extends State&lt;ProductCarousel&gt; {
    List&lt;ImageConfig&gt; imgList = [
      ImageConfig(
          source: &quot;http&quot;,
          path:
          'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),
      ImageConfig(
          source: &quot;http&quot;,
          path:
          'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),
      ImageConfig(
          source: &quot;http&quot;,
          path:
          'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
    ];
    List&lt;Widget&gt; imageSliders;
  
    final picker = ImagePicker();
  
    Future getImage() async {
      final pickedFile = await picker.getImage(source: ImageSource.gallery);
  
      setState(() {
        imgList.add(ImageConfig(source: &quot;file&quot;, path: pickedFile.path));
      });
    }
  
    Future deleteImage() async {
      setState(() {
        imgList.removeLast();
      });
    }
  
    @override
    Widget build(BuildContext context) {
      imageSliders = imgList
          .map(
            (item) =&gt;
            Container(
              child: Container(
                margin: EdgeInsets.all(5.0),
                child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    child: Stack(
                      children: &lt;Widget&gt;[
                        item.source == &quot;http&quot;
                            ? Image.network(item.path,
                            fit: BoxFit.cover, width: 1000.0)
                            : Image.file(File(item.path),
                            fit: BoxFit.cover, width: 1000.0),
                        Positioned(
                          bottom: 0.0,
                          left: 0.0,
                          right: 0.0,
                          child: Container(
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  Color.fromARGB(200, 0, 0, 0),
                                  Color.fromARGB(0, 0, 0, 0)
                                ],
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                              ),
                            ),
                            padding: EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 20.0),
                          ),
                        ),
                      ],
                    )),
              ),
            ),
      )
          .toList();
  
      return Container(
       child: Column(
          children: &lt;Widget&gt;[
            CarouselSlider(
              options: CarouselOptions(
                  autoPlay: false,
                  aspectRatio: 2.0,
                  enlargeCenterPage: true,
                  enlargeStrategy: CenterPageEnlargeStrategy.height,
                  pauseAutoPlayOnManualNavigate: true,
                  pauseAutoPlayOnTouch: true,
                  scrollDirection: Axis.horizontal),
              items: imageSliders,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: &lt;Widget&gt;[
                FlatButton(
                                 padding: EdgeInsets.all(8.0),
                  splashColor: Colors.tealAccent,
                  child: Row(
                    children: &lt;Widget&gt;[
                      Icon(FontAwesomeIcons.plus),
                    ],
                  ),
                  onPressed: getImage,
                ),
                FlatButton(
                  padding: EdgeInsets.all(8.0),
                  splashColor: Colors.red,
                  child: Row(
                    children: &lt;Widget&gt;[
                      Icon(FontAwesomeIcons.trashAlt),
                    ],
                  ),
                  onPressed: deleteImage,
                ),
              ],
            )
          ],
        ),
      );
    }
  }
  </code></pre>