Flutter ListView item's image changes temporarily each other - flutter

Question

Hello I want to make the Listview when I tapped the item, it removes and insert that item in the last of the item list.
removing and inserting is working, but the problem is image.
I use item's image.
If I tapped the item, it reordered by removing and inserting.
during the removing and inserting, Item's image changes each other temporarily.
It seems like flickering. I used AnimatedList first, I think that AnimatedList is the reason for the problem. So, I changed it ListView. But It has same problem. I use image by circleAvatar. and i use CachedNetworkImageProvider.
my english is short and it is first use of stackoverflow.
thank you for understanding.
This is my problem
and this is my Listview
companionListView(List<Companion> companions) {
return Container(
height: 60,
width: 60.0 * (companions.length),
child: Center(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: companions.length,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
if (companions[index].id == 0) {
return Align(
widthFactor: 0.57,
child: SizedBox(
width: index == 0 || index == companions.length - 1 ? 50 : 100,
height: 30,
),
);
} else {
return companionSelection[companions[index].id] == true
? Align(
widthFactor: 0.57,
child: Stack(
overflow: Overflow.visible,
children: [
GestureDetector(
onTap: () {
removeCompanion(companions, index);
if (selectedList.isEmpty) {
Provider.of<SelectionText>(context, listen: false).unselected();
} else if (selectedList.length != customerCompanions.length) {
Provider.of<SelectionText>(context, listen: false).coexist();
} else {
Provider.of<SelectionText>(context, listen: false).allSelected();
}
print('selectedList');
print(selectedList);
},
child: CircleAvatar(
backgroundColor: Color(0xFFffffff),
radius: 30,
backgroundImage: companions[index].image.isNotEmpty
? CachedNetworkImageProvider(companions[index].image)
: AssetImage('assets/images/abcd.png'),
),
),
Positioned(
top: 0,
left: 0,
child: Image.asset('assets/images/border_check_y.png', width: 20, height: 20))
],
),
)
: Align(
widthFactor: 0.57,
child: Stack(
overflow: Overflow.visible,
children: [
GestureDetector(
onTap: () {
removeCompanion(companions, index);
if (selectedList.isEmpty) {
Provider.of<SelectionText>(context, listen: false).unselected();
} else if (selectedList.length != customerCompanions.length) {
Provider.of<SelectionText>(context, listen: false).coexist();
} else {
Provider.of<SelectionText>(context, listen: false).allSelected();
}
print('selectedList');
print(selectedList);
},
child: ColorFiltered(
colorFilter: ColorFilter.mode(Colors.grey[300], BlendMode.modulate),
child: CircleAvatar(
backgroundColor: Color(0xFFffffff),
radius: 30,
backgroundImage: companions[index].image.isNotEmpty
? CachedNetworkImageProvider(companions[index].image)
: AssetImage('assets/images/abcd.png'),
),
),
),
Positioned(
top: 0,
left: 0,
child: Image.asset('assets/images/border_check_g.png', width: 20, height: 20))
],
),
);
}
},
),
),
);
}
code for removing and inserting item
removeCompanion(List<Companion> companions, int index) {
for (int i = 0; i < companions.length; i++) {
if (companions[i].id == 0) {
idx = i;
break;
}
}
companionSelection[companions[index].id] == false
? companionSelection.update(companions[index].id, (value) => true)
: companionSelection.update(companions[index].id, (value) => false);
if (idx < index) {
companions.insert(idx, companions[index]);
companions.removeAt(index + 1);
selectedList.add(companions[index]);
} else {
companions.add(companions[index]);
companions.remove(companions[index]);
selectedList.removeAt(index);
}
}

Answer 1

need code your widgets tree. May be toy not use Key in itemList widgets?