Flutter ListView item's image changes temporarily each other

0

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);
    }
  }
flutter
dart
asked on Stack Overflow Feb 3, 2021 by shinyo17 • edited Feb 4, 2021 by shinyo17

1 Answer

0

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


User contributions licensed under CC BY-SA 3.0