I have implemented a card-swiping feature in my Flutter app using the CarouselSlider library. Each card represents a user profile and contains multiple images. The issue I'm facing is that when I swipe to a new card, the widget displays the wrong image from the previous card instead of showing the correct image at index zero. To illustrate, let's consider the following scenario:
Initially, I'm on the first card , i swipe to the 2nd image(index one) of this card.
When I swipe to the second card, instead of showing the first image of the second card, the widget displays the second image of that card (which was at index one).
In other words, the widget seems to retain the image index of the previous card and displays the image at that index on the new card. For instance, if I swiped from the second image of the previous card, the widget incorrectly shows the second image on the new card.
Widget build(BuildContext context) {
final s = S.of(context);
return Scaffold(
body: SafeArea(
child: StreamBuilder<List<UsersModel>>(
stream: _usersStream,
builder:
(BuildContext context, AsyncSnapshot<List<UsersModel>> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
// Display the progress indicator while loading
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/logo_splash.png',
width: MediaQuery.of(context).size.height * 0.4,
height: MediaQuery.of(context).size.height * 0.4,
),
const SizedBox(
height: 130.0,
),
const CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<Color>(Color(0xff629a18)),
strokeWidth: 5,
),
],
),
),
);
} else if (snapshot.hasData) {
// Process the data and build your UI accordingly
List<UsersModel> usersList = snapshot.data!;
if (usersList.length < 2) {
return templateScreen(
'Oops! No users found. \nTry adding more universities in your interest list.');
}
return CardSwiper(
onSwipe: _onSwipe,
controller: controller,
padding: EdgeInsets.zero,
cardsCount: usersList.length,
allowedSwipeDirection: AllowedSwipeDirection.symmetric(
horizontal: false,
vertical: true,
),
cardBuilder: (context, index) {
UsersModel user = usersList[index];
fieldsOfInterest = user.fieldsOfInterest;
return Container(
color: Colors.black,
child: Stack(
children: [
Stack(
alignment: Alignment.topLeft,
children: List.generate(
user.imageUrls.length,
(slideIndex) => AnimatedSlide(
offset: const Offset(0, 0),
duration: const Duration(seconds: 2),
child: AnimatedScale(
duration: const Duration(seconds: 1),
scale: 1,
child: Stack(
alignment: Alignment.topLeft,
children: [
CarouselSlider.builder(
itemCount: user.imageUrls.length,
itemBuilder: (context, carouselIndex,
realIndex) =>
Image.network(
user.imageUrls[carouselIndex],
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
),
options: CarouselOptions(
onPageChanged: (val, reason) {
setState(() {
selectedCarouselIndex = val;
});
},
enableInfiniteScroll: false,
viewportFraction: 1,
height: MediaQuery.of(context)
.size
.height,
),
),
//ye jo dots hian emili k upr ye wo code hai
PositionedDirectional(
bottom: 40,
start: 30,
end: 30,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: List.generate(
user.imageUrls
.length, // Use slides.length here instead of 4
(index) => Row(
children: [
Container(
height: 8,
width:
selectedCarouselIndex ==
index
? 20
: 8,
margin:
const EdgeInsetsDirectional
.only(
end: 3,
),
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(8),
color: AppTheme
.whiteColor
.withOpacity(0.4),
),
),
],
),
),
),
//rest of the code
Future<bool> _onSwipe(
int previousIndex,
int? currentIndex,
CardSwiperDirection direction,
) async {
showAllItems = false;
selectedCarouselIndex = 0;
debugPrint(
'The card $previousIndex was swiped to the ${direction.name}. Now the card $currentIndex is on top',
);
return true;
}
I suspect that the issue lies in how I handle the onPageChanged callback of the CarouselOptions in CarouselSlider, which is responsible for updating the selected image index. However, my attempts to fix the problem by updating the index in this callback have been unsuccessful.
I kindly request assistance in understanding the cause of this issue and guidance on how to resolve it correctly. Thank you for any help or insights you can provide.
