Flutter ListView getting automatically updated at wrong index or element-CodePudding

I am trying to make a list view that shows an addition to a certain number. Here in the image, I am trying to generate an addition table for 16 steps in a ListView. It appears fine when it gets loaded but after scrolling the top and the bottom element gets updated automatically. This problem is only evident when the value of the variable tableSize that basically controls the number of items in the ListView exceeds 15. How can this problem be solved??

// tableSize = 16 && tCount = 10

Here is the code

return ListView.builder(
  key: UniqueKey(),
  padding: EdgeInsets.symmetric(horizontal: 5),
  itemCount: DataFile.tableSize,
  scrollDirection: Axis.vertical,
  itemBuilder: (context, index) {
    tCount = tCount   1;

    String title;

    print(" Tcount = ${tCount}");

    if (sign == DataFile.divisionSign) {
      double ans = tableNo / tCount;
      title = tableNo.toString()  
          space  
          sign  
          space  
          tCount.toString()  
          space  
          equal  
          space  
          f.format(ans);
    } else {
      int ans;
      if (sign == DataFile.additionSign) {
        ans = tableNo   tCount;
      } else if (sign == DataFile.subtractionSign) {
        ans = tableNo - tCount;
      } else {
        ans = tableNo * tCount;
      }

      title = tableNo.toString()  
          space  
          space  
          sign  
          space  
          space  
          tCount.toString()  
          space  
          space  
          equal  
          space  
          space  
          int.parse(ans.toString()).toString();
      print(title);
    }

    return InkWell(
      child: Container(
        height: cellHeight,
        margin: EdgeInsets.symmetric(
            vertical: ConstantData.getScreenPercentSize(context, 2.3)),
        child: Center(
          child: ConstantWidget.getTextWidget(
              title,
              ConstantData.textColors!,
              ConstantData.getPercentSize(cellHeight, 98),
              FontWeight.w500,
              TextAlign.center),
        ),
      ),
      onTap: () {},
    );
  },
);

CodePudding user response：

Change required in the tCount which is mutable data in the state variable.

Use this code:

return ListView.builder(
  key: UniqueKey(),
  padding: EdgeInsets.symmetric(horizontal: 5),
  itemCount: DataFile.tableSize,
  scrollDirection: Axis.vertical,
  itemBuilder: (context, index) {

tCount = index   1; //change here 

String title;

print(" Tcount = ${tCount}");

if (sign == DataFile.divisionSign) {
  double ans = tableNo / tCount;
  title = tableNo.toString()  
      space  
      sign  
      space  
      tCount.toString()  
      space  
      equal  
      space  
      f.format(ans);
} else {
  int ans;
  if (sign == DataFile.additionSign) {
    ans = tableNo   tCount;
  } else if (sign == DataFile.subtractionSign) {
    ans = tableNo - tCount;
  } else {
    ans = tableNo * tCount;
  }

  title = tableNo.toString()  
      space  
      space  
      sign  
      space  
      space  
      tCount.toString()  
      space  
      space  
      equal  
      space  
      space  
      int.parse(ans.toString()).toString();
  print(title);
}

return InkWell(
  child: Container(
    height: cellHeight,
    margin: EdgeInsets.symmetric(
        vertical: ConstantData.getScreenPercentSize(context, 2.3)),
    child: Center(
      child: ConstantWidget.getTextWidget(
          title,
          ConstantData.textColors!,
          ConstantData.getPercentSize(cellHeight, 98),
          FontWeight.w500,
          TextAlign.center),
    ),
  ),
  onTap: () {},
);
},
);