title: Flutter- Image picker package: show images one after another with delete action
body: <p>In my Flutter pr project, I am using <a href="https://pub.dev/packages/image_picker" rel="nofollow noreferrer">Image Picker</a> plugin to select images from the android mobile gallery or capture images with the camera and show them one after another with a delete icon below each image. On tapping the <code>RaisedButton</code> for selecting images from the gallery, the method <code>imageSelectorGallery()</code> is called. There inside the <code>setState()</code> method , I add a <code>SizedBox</code> and a <code>delete</code> icon to the <code>List</code> namely <code>images_captured</code>. I expect the <code>images_captured</code> to be rendered inside the <code>Column</code> in <code>SingleChildScrollView</code>.</p>
  <p>But after selecting an image from the gallery, nothing happens. I also want to tap on the <code>delete</code> icon and remove the image above it. But flutter has no data binding mechanism as I know to correlate the image with the delete button.</p>
  <p>Code follows:</p>
  <pre><code>class PrescriptionScreen extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return new UserOptionsState();
    }
  }
  
  class UserOptionsState extends State&lt;PrescriptionScreen&gt; {
  //save the result of gallery fileUserOptions
    File galleryFile;
  
  //save the result of camera file
    File cameraFile;
  
    @override
    Widget build(BuildContext context) {
  
      var images_captured=List&lt;Widget&gt;();
  
  
      //display image selected from gallery
      imageSelectorGallery() async {
        galleryFile = await ImagePicker.pickImage(
          source: ImageSource.gallery,
          // maxHeight: 50.0,
          // maxWidth: 50.0,
        );
        print(&quot;You selected gallery image : &quot; + galleryFile.path);
        setState(() {
  
  
  
          var sized_box_indiv= new SizedBox(
              height: 200.0,
              width: 300.0,
  //child: new Card(child: new Text(''+galleryFile.toString())),
  //child: new Image.file(galleryFile),
              child:  galleryFile == null
                  ? new Text('Sorry nothing selected from gallery!!')
                  : new Image.file(galleryFile),
  
          );
          images_captured.add(sized_box_indiv);
  
          var delete_button = IconButton(icon: Icon(Icons.delete), onPressed: () {});
          images_captured.add(delete_button);
  
        });
      }
  
      //display image selected from camera
      imageSelectorCamera() async {
        cameraFile = await ImagePicker.pickImage(
          source: ImageSource.camera,
          //maxHeight: 50.0,
          //maxWidth: 50.0,
        );
        print(&quot;You selected camera image : &quot; + cameraFile.path);
        setState(() {});
      }
  
   
            return new SingleChildScrollView(
                child:Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: &lt;Widget&gt;[
                new RaisedButton(
                  child: new Text('Select Image from Gallery'),
                  onPressed: imageSelectorGallery,
                ),
                new RaisedButton(
                  child: new Text('Select Image from Camera'),
                  onPressed: imageSelectorCamera,
                ),
  
                Column(
                            children: images_captured
                        ),
  
                
              ],
            ),
      );
         /* },
        ),
      );*/
    }
  
  
  }
  </code></pre>
  <p>How to show the images selected from gallery one after another with a <code>delete</code> icon button below each of them?</p>
  <p>How to remove the corresponding image on tapping the <code>delete</code> icon button?</p>
  <p>I think if I can accomplish it for gallery, I can do it for camera capturing as well.</p>
  <p>I used the answer by jJuice and the images after being selected showed overflow error. The screenshot is given below:</p>
  <p><a href="https://i.stack.imgur.com/bbSrj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bbSrj.jpg" alt="" /></a></p>
  <p>My code is:</p>
  <pre><code>class UserOptionsState extends State&lt;PrescriptionScreen&gt; {
  //save the result of gallery fileUserOptions
    File galleryFile;
  
  //save the result of camera file
    File cameraFile;
    var images_captured=List&lt;Widget&gt;();
  
    List&lt;File&gt; images = List&lt;File&gt;();
  
    @override
    Widget build(BuildContext context) {
  
      //display image selected from gallery
      imageSelectorGallery() async {
  
  
  
     galleryFile = await ImagePicker.pickImage(
          source: ImageSource.gallery,
          // maxHeight: 50.0,
          // maxWidth: 50.0,
        );
  
        images.add(galleryFile);
        print(&quot;You selected gallery image : &quot; + galleryFile.path);
        setState(() {
  
  
          
        });
      }
  
      //display image selected from camera
      imageSelectorCamera() async {
        cameraFile = await ImagePicker.pickImage(
          source: ImageSource.camera,
          //maxHeight: 50.0,
          //maxWidth: 50.0,
        );
        print(&quot;You selected camera image : &quot; + cameraFile.path);
        setState(() {});
      }
  
  
  
      return new SingleChildScrollView(
        child:Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: &lt;Widget&gt;[
            new RaisedButton(
              child: new Text('Select Image from Gallery'),
              onPressed: imageSelectorGallery,
            ),
            new RaisedButton(
              child: new Text('Select Image from Camera'),
              onPressed: imageSelectorCamera,
            ),
  
           new Container(
  //            new Column(
  //            children: &lt;Widget&gt;[
               height: 1200,
                child:GridView.count(
                crossAxisSpacing: 6,
                mainAxisSpacing: 6,
                crossAxisCount: 3,
                children: List.generate(images.length, (index) {
                  return Column(
                      children: &lt;Widget&gt;[
                        Container(
                            height: 200,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                            ),
                            child: ClipRRect(
                              child: Image.file(images[index], fit: BoxFit.cover),
                              borderRadius: BorderRadius.circular(10),
                            )
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              images.removeAt(index);
                            });
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(3.0),
                            child: Align(
                              alignment: Alignment.bottomCenter,
                              child: Icon(Icons.clear, color: Colors.black, size: 20),
                            ),
                          ),
                        ),
                      ]
                  );
                }
                ),
              ),
  //              ]
            )
  
            /*displaySelectedFile(galleryFile),
                displaySelectedFile(cameraFile)*/
          ],
        ),
      );
  
  
  
    }
  
    Widget displaySelectedFile(File file) {
      return new SizedBox(
        height: 200.0,
        width: 300.0,
  //child: new Card(child: new Text(''+galleryFile.toString())),
  //child: new Image.file(galleryFile),
        child: file == null
            ? new Text('Sorry nothing selected!!')
            : new Image.file(file),
      );
    }
  }
  </code></pre>