I am building a tinder and bumble like dating app in a flutter. So, I am using swipe cards and as I have to make it scrollable so when I make it scrollable then the swiping is too slow and there is so much lagging so is there any solution to get rid of it?
Here is my code:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:swipe_cards/swipe_cards.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<String> _images = [
"https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
"https://static01.nyt.com/images/2019/11/17/books/review/17Salam/Salam1-superJumbo.jpg",
"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
"https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
"https://images.unsplash.com/photo-1488716820095-cbe80883c496?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=333&q=80",
"https://images.unsplash.com/photo-1485043433441-db091a258e5a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
];
List<SwipeItem> _swipeItems = [];
MatchEngine? _matchEngine;
@override
void initState() {
// TODO: implement initState
for (int i = 0; i < _images.length; i++) {
_swipeItems.add(SwipeItem(content: _images[i]));
}
_matchEngine = MatchEngine(swipeItems: _swipeItems);
super.initState();
}
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
//backgroundColor: Color(0xff7cc8cc),
appBar: AppBar(
backgroundColor: Color(0xff76c9b2),
centerTitle: true,
title: Text('Flutter Tinder Cards'),
),
body: SwipeCards(
matchEngine: _matchEngine!,
onStackFinished: () {},
itemBuilder: (context, index) {
return Container(
height: screenHeight,
width: screenWidth,
child: Card(
margin: EdgeInsets.all(0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(0)),
side: BorderSide(color: Colors.grey)
),
child: SingleChildScrollView(
child: Column(
children: [
CachedNetworkImage(
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
height: screenHeight,
width: screenWidth,
fit: BoxFit.cover,
//imageUrl: imgUrls![0],
imageUrl: _images[0],
),
Padding(
padding: const EdgeInsets.only(
left: 23.0,
top: 12,
bottom: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Poonam, 18',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.black87),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 23,
),
child: Row(
children: [
Icon(
Icons.location_on_sharp,
size: 20,
),
SizedBox(
width: 4,
),
Text(
'Surat, India',
style: TextStyle(
fontSize: 18,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Personal Information',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
SizedBox(
height: 6,
),
Text(
'Ex - Zerodha, Ex - Grant Thornton. I used to crunch numbers and value companies for a living, now I’m trying to build one.',
style: TextStyle(fontSize: 12),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Height',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
"5'11",
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Community',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Vaishnav',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Gender',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Female',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Workout',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Regularly',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![1] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![1],
imageUrl: _images[1],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Professional Information',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Education',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Master Degree',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Worklife',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Salary',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Above 10Lpa',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![2] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![2],
imageUrl: _images[2],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Social Life',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Drinking',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Never',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Smoking',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Never',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![3],
imageUrl: _images[3],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Others',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Zodiac Sign',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Leo',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Political inclination',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Apolitics',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Movies',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Hindi Cinema',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![4] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
imageUrl: _images[4],
//imageUrl: imgUrls![4],
),
),
SizedBox(
height: 20,
),
//imgUrls![5] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
imageUrl: _images[5],
//imageUrl: imgUrls![5],
),
),
SizedBox(
height: 80,
)
],
),
),
),
);
},
),
);
}
}
Here, instead of SinglechildScrollView I have also tried to use ListView and ListView.builder but the same problem appears.