When images are used in list, next card shows previous image for fraction of time

[ashoksisara]

AppinioSwiper(
        unlimitedUnswipe: true,
        controller: controller,
        allowUnswipe: false,
        unswipe: _unSwipe,
        cards: value.newsList.map((e) {
          index++;
          return NewsCard(news: e,);
        }).toList(),
        onSwipe: _swipe,
        padding: const EdgeInsets.only(
          left: 20,
          right: 20,
          top: 20,
          bottom: 120,
        ),
      )

///news card 

class NewsCard extends StatelessWidget {
  final NewsModel news;

  const NewsCard({
    Key? key,
    required this.news,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: UIHelper.createDecoration(color: Colors.white),
      alignment: Alignment.center,
      child: Column(
        children: [
          Expanded(
            child: FutureBuilder(
              future: news.getImageFromArticle(),
              builder: (context, snapshot) {
                if(snapshot.hasData && snapshot.data != null){
                  return ClipRRect(
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                    child: CustomNetworkImage(
                      imageUrl: snapshot.data!,
                      fit: BoxFit.cover,
                    ),
                  );
                }
                return Container(
                  decoration: BoxDecoration(
                      borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(10),
                        topRight: Radius.circular(10),
                      ),
                    color: Colors.purple[100]
                  ),
                );
              },
            ),
          ),
          Container(
            padding: const EdgeInsets.all(15),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10),
              ),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  news.title?.trim() ?? '',
                  style: const TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                  maxLines: 2,
                ),
                const SizedBox(
                  height: 5,
                ),
                Text(
                  Utils.timeAgoSinceDate(time: news.publishedAt ?? ''),
                  maxLines: 1,
                  style: const TextStyle(color: Colors.grey),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

https://user-images.githubusercontent.com/48236083/221361379-2fdac9d1-9b86-4fa5-aa46-cd4f24d553d0.mp4

Please help me out to solve this problem

Thanks in advance

[khanmujeeb687]

Hey @ashoksisara , I tested this feature with images and it seems to work fine for me, would be great if you can share the implementation for news.getImageFromArticle() function.

[frameartist]

I encountered similar issues. I think the main problem is that your CustomNetworkImage is a stateful widget or it involves some animation. Every time you swipe the card, a "re-initialization" of the widget inside the card (in this case NewsCard) occurs, causing CustomNetworkImage to initialize again. So it's initState() and all sorts of animation runs again.

[BottleMoon]

Use a Key with StatefulWidget Widget build(BuildContext context) { return Example(key: UniqueKey()); }