Adding different onTap pages for seperate cards - flutter

Question

I was looking at a UI which have different cards placed vertically, I tried adding onTap feature to open a separate page for different cards each.In this UI there's vertical cards placed with the data of images,title and a read later button,Adding a gesture detector above clipReact to add the onTap material page route feature and adding onTap below the read later button but where should I place the onTap
onTap: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (_) => /*what to define here*/)),
Is there a way to add separate onTap feature for separate page for different cards ?
class CardScrollWidget extends StatelessWidget {
var currentPage;
var padding = 20.0;
var verticalInset = 20.0;
CardScrollWidget(this.currentPage);
#override
Widget build(BuildContext context) {
return new AspectRatio(
aspectRatio: widgetAspectRatio,
child: LayoutBuilder(builder: (context, contraints,) {
var width = contraints.maxWidth;
var height = contraints.maxHeight;
var safeWidth = width - 2 * padding;
var safeHeight = height - 2 * padding;
var heightOfPrimaryCard = safeHeight;
var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;
var primaryCardLeft = safeWidth - widthOfPrimaryCard;
var horizontalInset = primaryCardLeft / 2;
List<Widget> cardList = new List();
for (var i = 0; i < images.length; i++) {
var delta = i - currentPage;
bool isOnRight = delta > 0;
var start = padding + max(primaryCardLeft -horizontalInset * -delta * (isOnRight ? 15 : 1),
0.0);
var cardItem = Positioned.directional(
top: padding + verticalInset * max(-delta, 0.0),
bottom: padding + verticalInset * max(-delta, 0.0),
start: start,
textDirection: TextDirection.rtl,
child: GestureDetector(
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child:Container(
decoration: BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(3.0, 6.0),
blurRadius: 10.0)
]),
child: AspectRatio(
aspectRatio: cardAspectRatio,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(images[i], fit: BoxFit.cover),
Align(
alignment: Alignment.bottomLeft,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(
horizontal: 16.0, vertical: 8.0),
child: Text(title[i],
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontFamily: "SF-Pro-Text-Regular")),
),
SizedBox(
height: 10.0,
),
Padding(
padding: const EdgeInsets.only(
left: 12.0, bottom: 12.0),
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 22.0, vertical: 6.0),
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(20.0)),
child: Text("Read Later",
style: TextStyle(color: Colors.white)),),),],),)],)),),),
onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => )),
),);
cardList.add(cardItem);
}
return Stack(
children: cardList,
);}),);}}
data-
List<String> images = [
"assets/image_04.jpg",
"assets/image_03.jpg",
"assets/image_02.jpg",
"assets/image_01.png",
];
List<String> title = [
"Hounted Ground",
"Fallen In Love",
"The Dreaming Moon",
"Jack the Persian and the Black Castel",
];

Answer 1

you can change your data structure to place your destination page and put it to MaterialPageRoute builder method.
List pages = [
{
"image" : "assets/image_01.png",
"title" : "Hounted Ground 1",
"page" : YOURWIDGET(),
},
{
"image" : "assets/image_02.png",
"title" : "Hounted Ground2",
"page" : YOURWIDGET(),
},
{
"image" : "assets/image_03.png",
"title" : "Hounted Ground 3",
"page" : YOURWIDGET(),
}
];
// in your cards page build method
// note that you should place below code in a multi widget support widget like Column(), ListView(), ...
Column(
children: pages.map((page) {
return Card(
// card content and attributes
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext ctx) {
return page['page'];
}
));
}
);
}).toList()
);

Answer 2

onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (_) => (i == 0)
? pageOne()
: (i == 1)
? pageTwo()
: (i == 2)
? pageThree()
: pageFour())),