Flutter ListView getting automatically updated at wrong index or element

Question

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: () {},
    );
  },
);

Solution

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: () {},
);
},
);

Comments

[harsh bangari]

Use this inside itemBuilder: tCount = index + 1; instead of tCount = tCount + 1;

[Ankit Kumar]

yes, it works perfectly fine! thanks for this suggestion, I was really struggling with this one!