I have an app like tinder where user can swipe card to like or dislike. I use flutter_card_swiper (https://pub.dev/packages/flutter_card_swiper) package to swipe cards, and carousel_slider (https://pub.dev/packages/carousel_slider) to see user's pics into the card.
On Android, all is good and I can swipe normally, but when I test on iOS I can't swipe when my finger start from the card itself. I need to start from outer sides to swipe.
Here my code :
Expanded(
child: CardSwiper(
cardsCount: userListData.length,
cardBuilder: (context, swipeIndex) {
return Container(
padding: const EdgeInsets.all(10),
color: Colors.white,
child: SwipeCardWidget(
currentSwipeIndex: swipeIndex));
}),)
Basically, I need to start the swipe in the container's padding zone.
Here my SwipeCardWidget :
Widget build(BuildContext context) {
return FutureBuilder(
future: _data,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
} else {
List<UsersModel> usersListData = snapshot.data as List<UsersModel>;
List imagePathList = [];
imagePathList.clear();
for (var i in usersListData[widget.currentSwipeIndex].sports) {
var imagePath = Utils.getImagePath(i);
imagePathList.add(imagePath);
}
return Stack(
alignment: Alignment.center,
children: [
Container(
margin: const EdgeInsets.all(5.0),
height: 700,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
// border:
// Border.all(width: 0, color: googleColor)),
child: CarouselSlider(
items: usersListData[widget.currentSwipeIndex]
.pics
.map(
(item) => ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image.network(
item,
fit: BoxFit.cover,
)),
)
.toList(),
carouselController: _controller,
options: CarouselOptions(
scrollPhysics: const NeverScrollableScrollPhysics(),
initialPage: 0,
height: 700,
viewportFraction: 1.0,
enableInfiniteScroll: true,
enlargeCenterPage: true,
onPageChanged: (indexCarousel, reason) {
setState(() {
_currentIndexCarousel = indexCarousel;
});
}))),
Positioned(
top: 10,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: usersListData[widget.currentSwipeIndex]
.pics
.asMap()
.entries
.map((entry) {
return Container(
width: 80.0,
height: 8.0,
margin: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.white.withOpacity(
_currentIndexCarousel == entry.key
? 0.9
: 0.4)),
);
}).toList(),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {
_controller.previousPage();
},
icon: const Icon(Icons.arrow_back_ios)),
IconButton(
onPressed: () {
_controller.nextPage();
},
icon: const Icon(Icons.arrow_forward_ios))
],
),
Positioned(
bottom: 20.0,
left: 20.0,
child: BlurryContainer(
blur: 20,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
children: [
Text(
'${usersListData[widget.currentSwipeIndex].name} - ',
style: stylePreviewTitle,
),
...List.generate(
imagePathList.length,
(index) => Row(
children: [
const SizedBox(
width: 10,
),
SizedBox(
height: 30,
width: 30,
child: Image.asset(
imagePathList[index] ?? '',
),
),
],
),
),
],
),
Text(
usersListData[widget.currentSwipeIndex]
.age
.toString(),
style: stylePreviewContent,
),
Text(
usersListData[widget.currentSwipeIndex].city,
style: stylePreviewContent,
),
]),
),
),
Positioned(
bottom: 15,
right: 15,
child: IconButton(
color: Colors.white.withOpacity(0.25),
iconSize: 30,
icon: const Icon(
Icons.info_outline,
color: Colors.white,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const HelpPage()),
);
},
))
],
);
}
});
}
On Android, it works perfectly but not on iOS. I also tried with swipe_cards (https://pub.dev/packages/swipe_cards) package
