How to make cards swipeable like tabs in flutter? [duplicate] - flutter

Question

This question already has answers here:
Horizontally scrollable cards with Snap effect in flutter
(6 answers)
Closed 3 years ago.
I have been trying to make cards swipeable like tabs as shown in my mocks.
I have added my code and mock for reference.
Code:
Container(
margin: EdgeInsets.only(top: 35),
child: Center(
child: Card(
child: InkWell(
// splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
width: 300,
height: 450,
padding: EdgeInsets.all(30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'3 month Test Pass',
style: TextStyle(
fontSize: 23, fontWeight: FontWeight.bold),
),
Container(
margin: EdgeInsets.only(top: 10),
child: Text(
'50% off for early Birds',
style: TextStyle(
color: Colors.black54, fontSize: 16),
),
),
Container(
margin: EdgeInsets.only(top: 40),
child: Text(
'INR 49/month',
style: TextStyle(
fontSize: 21, fontWeight: FontWeight.bold),
),
),
Container(
margin: EdgeInsets.only(top: 7),
child: Text(
'INR 147 for 90 days',
style: TextStyle(
color: Colors.black54,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
Container(
margin: EdgeInsets.only(top: 30),
child: Text(
'New live exam every Monday',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Unlimited practise tests series',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Paper tailored by AI for you',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.only(top: 15),
child: Text(
'Solved previous year questions',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.only(top: 35),
child: RaisedButton(
padding: const EdgeInsets.only(top:10,bottom:10,left:40,right: 40),
textColor: Colors.black,
color: Colors.green,
child: Text('Buy Now',style: TextStyle(fontSize: 20),),
onPressed: null,
),
),
],
),
),
),
),
),
)
This is a container showing only one card, which is added in an array of Column in the body of Scaffold.
The idea is to have horizontally swipeable cards to make the user see the plans.
I am a beginner in Flutter.

Answer 1

You can use a ListView then set the scroll direction to horizontal
Just put all your containers / cards in the list view
Example:
ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
Container(
width: 160.0,
color: Colors.green,
),
Container(
width: 160.0,
color: Colors.yellow,
),
Container(
width: 160.0,
color: Colors.orange,
),
],
),
References
ListView - horizontal