ListView keeps data even if you exit the page

Question

Good morning/evening. Hope you are well.

I have a problem with my ListView.

I receive an Article object in the constructor of my EditArticlePage(StatefulWidget) and one of the properties of my Article is a List of links that I transmit in the constructor of my provider EditArticlePageProvider, then I retrieve these images which I display in a ListView.

When I delete an image from my ListView, it is deleted, so far, no problem ( 2 images - 1 image = 1 image).

But when I leave the EditArticlePage(press back button or back button on appbar), and come back to it, my ListView is kept with the modifications I made before, instead of the initial data of the Article.

P.S: all other data is reset except the ListView containing the images.

Here is my code:

My EditArticlePage class

class EditArticlePage extends StatefulWidget {
  final Article article;

  EditArticlePage(this.article, {Key key}) : super(key: key);

  @override
  _EditArticlePageState createState() => _EditArticlePageState();
}

class _EditArticlePageState extends State<EditArticlePage> {

 @override
Widget build(BuildContext context) {
  return ChangeNotifierProvider<EditArticlePageProvider>(
    create: (_) =>
        EditArticlePageProvider(originalImages: widget.article.imagesLinks),
    child: Consumer<EditArticlePageProvider>(
      builder: (context, editProvider, __) {
        final screenWidth = MediaQuery.of(context).size.width;
        final screenHeight = MediaQuery.of(context).size.height;
        return WillPopScope(
          onWillPop: () {
            return Future<bool>.value(true);
          },
          child: Scaffold(
            body: ListView(
              children: [
                buildArticleImages(screenWidth, screenHeight, editProvider),
              ],
            ),
          ),
        );
      },
    ),
  );
}
}

buildArticleImages methodes

Widget buildArticleImages(double screenWidth, double screenHeight,
          EditArticlePageProvider editProvider) =>
      Container(
        padding: EdgeInsets.symmetric(horizontal: 5.0),
        width: screenWidth,
        height: screenHeight * 0.15,
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemBuilder: (_, index) {
            final imageLink = editProvider.originalImages[index];
            return Stack(
              children: [
                SizedBox(
                  height: screenHeight * 0.15,
                  width: screenWidth * 0.35,
                  child: ClipRRect(
                      borderRadius: BorderRadius.all(
                        Radius.circular(9.0),
                      ),
                      child: Image.network(
                        imageLink,
                        fit: BoxFit.cover,
                      )
                ),
                Positioned(
                  child: DeleteButton(
                    onPressed: () {
                      editProvider.addToDeleteList(imageLink, index);
                      
                    },
                  ),
                  right: 3.0,
                  top: 3.0,
                )
              ],
            );
          },
          separatorBuilder: (_, index) => SizedBox(width: 5.0),
          itemCount: editProvider.originalImages.length,
        ),
      );

My provider

class EditArticlePageProvider extends ChangeNotifier {
  final List originalImages;

  EditArticlePageProvider({@required this.originalImages});
  

  List<String> imagesToDelete = [];
      
List<String> get imagesToDelete => _imagesToDelete;



void addToDeleteList(String imageLink, int index) {
    if (imageLink != null) {
      imagesToDelete.add(imageLink);
      originalImages.removeAt(index);
      notifyListeners();
    }
  }

}

May you guy help me please ? And tell me if i'm doing wrong something THANKS!

Answer 1

Because the originalImages and the widget.article.imagesLinks are actually references to the same list object, when originalImages.removeAt(index); in addToDeleteList method, it will remove the image at the index of this list object and the two references are affected.

Then, if you want to keep the images in widget.article.imagesLinks, you can copy the list in EditArticlePageProvider:

EditArticlePageProvider({@required List originalImages}) : this.originalImages = List.of(originalImages);