CODEWITHSUNDEEP
flutter
Farid
Farid

Reputation: 1020

Remove Image from Widget's list

On my Page, I have a button to take picture. Once that picture is taken, it'll update my Model (it's using Provider ChangeNotifier). And once picture is taken, the Page gets rebuild, and in the Scaffold main I'm build the widgets:

Widget build(BuildContext context) {
  return SingleChildScrollView(
    // Somewhere in the middle of this
    getPicturesSection(),
    // Continue with other widgets
  )
}

Widget getPicturesSection(BuildContext context) {
  var imagesPath = Provider.of<MyModel>(context, listen:false).imagesPath;
  var wids = <Widget>[]

  // Basically show all the taken pictures
  imagesPath.forEach((f) {
      wids.add(
          Image.file(
              File(f)
          )
      )
  })

  return Row(children: wids);
}

What I want to do is allow users to delete each image. So I want to add a delete icon below each image:

imagesPath.forEach((f) {
    wids.add(
        Column(
            children: <Widget> [
                Image.file(
                    File(f)
                ),
                IconButton(
                    onTap: () {
                        // How do I delete from the very same list that I am using to build this list?
                    }
                ),
            ],
        )
    )
})

Never mind, I figured out the answer. Since I'm already using ChangeNotifier, I just need to add the function to remove entry from the model, and the changes will propagate downwards.

List<String> imagesPath = new List<String>();
removeRejectionPicturePath(int ind) {
  this.imagesPath.removeAt(ind);
  notifyListeners();    // This will basically ask all the widgets that is the listener to rebuild the widget tree
}

Upvotes: 1

Views: 331

Answers (1)

Naveen Avidi
Naveen Avidi

Reputation: 3073

You can try this !

imagesPath.forEach((f) {
    wids.add(
        Column(
            children: <Widget> [
                Image.file(
                    File(f)
                ),
                IconButton(
                  icon:Icon(Icons.remove_circle),
                    onPressed: () {
                       setState((){
                         wids.removeAt(imagesPath.values.toList().indexOf(f));
                       });                       
                    }
                ),
            ],
        )
    );
});

Upvotes: 1

Related Questions