Why does my image disappear when I scroll down?

Question

I have 4 cards to take user inputs in a page, this 4 card widgets is showing in the listView, when user tap AddPhoto card, user can add photo from camera or gallery successfully, but after user added photo and scrolling page to give in inputs to the other cards, when AddPhoto card disappears because of sliding, after user turn back to the initial point of the page, the picture that user added is showing nothing.

How can I solve it?

class AddPhotoCard extends StatefulWidget {
  AddPhotoCard({this.subCategoryCardId,this.subCategoryId});

  final int subCategoryId;
  final int subCategoryCardId;

@override
  _AddPhotoCardState createState() => _AddPhotoCardState();
}
class _AddPhotoCardState extends State<AddPhotoCard> {
  String path;


  @override
  Widget build(BuildContext context) {

    return AnimatedPadding(
      duration: Duration(milliseconds: 500),
      padding: path==null?EdgeInsets.only(top: 7.5,left: 30,right: 30,bottom:7.5):
        EdgeInsets.only(top: 7.5,left: 7.5,right: 7.5,bottom:7.5),
      child: GestureDetector(
        onTap: (){
          _showOptions(context);
        },
        child: AnimatedContainer(
          duration: Duration(milliseconds:500),
          height: path==null?200:400,
          child:  Container(
            decoration: BoxDecoration(
              border: Border.all(style: BorderStyle.solid, width: 1),
              borderRadius: BorderRadius.circular(30),
              color:categoryModels[widget.subCategoryId].subCategoryModels[widget.subCategoryCardId].categoryColor.withOpacity(0.5),
            ),
            child: Padding(
              padding:EdgeInsets.all(5.0),
              child: Column(
                children: [
                  Expanded(
                    child: AspectRatio(
                      aspectRatio: 600/600,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(30),
                        child: Container(
                          decoration:  BoxDecoration(
                              image:  DecorationImage(
                                fit: BoxFit.fitWidth,
                                alignment: FractionalOffset.center,
                                image: path==null?AssetImage("images/stickerForRecipeScreen.png"):FileImage(File(path)),
                              )
                          ),
                        ),
                      ),
                    ),
                  ),
                  path==null?Text(
                    "${categoryModels[widget.subCategoryId].subCategoryModels[widget.subCategoryCardId]
                    .subCategoryName} tarifiniz için bir resim çekin",
                    style: TextStyle(
                      color: Colors.black,
                      fontFamily: "OpenSans",
                      fontWeight: FontWeight.bold,
                      fontSize: 20),): SizedBox.shrink(),
                  path==null?Icon(
                    Icons.camera_alt_rounded,
                    color: Colors.black,size: 70,): SizedBox.shrink(),
                  path==null?SizedBox(height: 20): SizedBox.shrink(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

This problem occurs because the ListView automatically destroys any widgets that are "scrolled away". You need to keep them alive or increase the cache:

Solution 1: Add this to your ListView:

cacheExtent: 4 //the number of widgets you have and want to keepAlive

Solution 2: Make your widgets a keepAlive:

//add this to the AddPhoto build method
super.build(context);

//add this to the end of the AddPhoto state, outside the build method
@override
bool get wantKeepAlive => true;

//add this then to your ListView
addAutomaticKeepAlives: true