How to prevent Flutter CircleAvatar changes its background color-CodePudding

I am building a list view with CircleAvatar in Flutter. I noticed that, when I'm adding a new element to my list, the first avatar background color will remain the same as the previous list tile for a very short period of time (less than half sec), then gradually change to the color that is set to the new list tile.

Any idea on this? Is it because of the listview.builder reuses tiles, or it is because of the CircleAvatar widget itself?

The original code is too long to paste here. The following is paraphrased:

Widget build() {
  return ListView.separated(
      separatorBuilder: (context, index) {
        return Divider();
      },
      itemCount: 2,
      itemBuilder: (context, index) {
        if (index == 0) {
          return ListTile(
              leading: CircleAvatar(
                  child: Text("Deleted User"), backgroundColor: Colors.red));
        } else {
          return ListTile(
     

     leading:
              CircleAvatar(child: Text("V"), backgroundColor: Colors.blue));
    }
  });
}

The red "V" changes from the red color ( "DU" avatar above it) to blue color (which it is set to, "V" avatar in bottom half of the pic) The red "V" should be blue

CodePudding user response：

set your backgroundColor to transparent inside CircleAvatar

CodePudding user response：

I solved this by adding a key to listTile. This tells flutter to treat tiles as different ones.