Why image in listview disappears when the page scroll down?

Question

I have a page which is called recipeScreen, on this screen I have 4 widgets which I listed in listView.

In the first widget, users can add a photo, after user uploads a photo and scrolls down the page, the image disappears.

I added some code to avoid it from disappearing, but still it's gone.

Here is my code:

class RecipeScreen extends StatefulWidget {
  RecipeScreen({this.subCategoryCardId,this.subCategoryId});
  final int subCategoryId;
  final int subCategoryCardId;
  static String id="recipeScreen";
  @override
  _RecipeScreenState createState() => _RecipeScreenState();
}

class _RecipeScreenState extends State<RecipeScreen> with AutomaticKeepAliveClientMixin  {

  List<Widget>recipeScreenCards=[
    AddPhotoCard(),
    AddIngredientsCard(),
    AddIngredientsAmount(),
    AddRecipeVoice()];

  bool isPageSaved=false;
  double _animatedContainerHeight=200;
  String textValue;
  int index=-1;

  Future<bool> _showAlertDialog(BuildContext context){
    AlertDialog alert = AlertDialog(
      backgroundColor: kColorTheme10,
      elevation: 0,
      content: Container(decoration:BoxDecoration(
          color: Colors.white70.withOpacity(0.7),
          borderRadius: BorderRadius.circular(15)
      ),  child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
            "Tarifiniz tamamlanmadı.Çıkmak istediğinizden emin misiniz?",
            style: TextStyle(
                fontSize: 25,
                fontFamily: "OpenSans")
        ),
      ),
      ),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
      actions: [
        Container(
          decoration: BoxDecoration(
              color: Colors.white70.withOpacity(0.7),
              borderRadius: BorderRadius.circular(30)
          ),
          child: TextButton(onPressed:()async{
            Navigator.of(context).pop(true);
          },
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("EVET",style: TextStyle(fontWeight: FontWeight.bold,fontFamily: "OpenSans"),),
              )),
        ),
        Container(
          decoration: BoxDecoration(
              color:Colors.white70.withOpacity(0.7),
              borderRadius: BorderRadius.circular(30)
          ),
          child: TextButton(onPressed:()async{
            Navigator.of(context).pop(false);
          },
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("HAYIR",style: TextStyle(fontWeight: FontWeight.bold, fontFamily: "OpenSans")),
            ),
          ),
        ),
      ],
    );
    return showDialog(
        context: context,
        builder: (_)=>alert);
  }


  void toggleAnimatedContainerHeight(){
    _animatedContainerHeight==200?_animatedContainerHeight=450:_animatedContainerHeight=200;
  }

  void _clearIngredient(BuildContext ctx) {
    Provider.of<IngredientsProvider>(ctx,listen: false).clearList();
  }


  @override
  Widget build(BuildContext context) {
    super.build(context);
    return WillPopScope(
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: false,
            centerTitle: true,
            title: BorderedText(
              child:Text(
                categoryModels[widget.subCategoryId].subCategoryModels[widget.subCategoryCardId].subCategoryName,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 30,
                    fontFamily: "OpenSans"
                ),
              ),
              strokeWidth: 5,
              strokeColor: Colors.black,
            ),
            elevation: 5,
            backgroundColor: categoryModels[widget.subCategoryId].
              subCategoryModels[widget.subCategoryCardId].categoryColor,
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed:()async{
                var response = await _showAlertDialog(context);
                if(response==true){
                  _clearIngredient(context);
                  Navigator.pop(context);

                }
              },
              iconSize: 40,
              color: Colors.white,
            ),
            actions: [
              CircleAvatar(
                radius: 27,
                backgroundColor: Colors.transparent,
                backgroundImage: AssetImage("images/cuttedlogo.PNG"),
              )
            ],
          ),
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(kBGWithLogoOpacity),
                fit: BoxFit.cover,
              ),
            ),
            child: Scrollbar(
              isAlwaysShown: true,
              thickness: 7,
              radius: Radius.circular(90),
              child: ListView(
                addAutomaticKeepAlives: true,
                scrollDirection: Axis.vertical,
                children: [
                  AddPhotoCard(subCategoryCardId: widget.subCategoryCardId, subCategoryId: widget.subCategoryId),
                  AddIngredientsCard(subCategoryCardId: widget.subCategoryCardId, subCategoryId: widget.subCategoryId),
                  AddIngredientsAmount(subCategoryCardId: widget.subCategoryCardId, subCategoryId: widget.subCategoryId),
                  AddRecipeVoice(subCategoryCardId: widget.subCategoryCardId, subCategoryId: widget.subCategoryId),
                  ]
                ),
            ),
          )
         )
      ),
      onWillPop: ()async{
        if(isPageSaved==false){
          var response = await _showAlertDialog(context);
          if(response==true){
            _clearIngredient(context);
            Navigator.pop(context);
            return true;
          }
        }
        return false;
      },
    );
  }
  @override
  bool get wantKeepAlive => true;
}

Answer 1

The reason is whenever the widget in listview goes out of the view or the screen and then comes back then the widget is re rendered that's the reason you are loosing the image. To overcome this replace your listview with the column and wrap the column in SingleChildScrollView.