flutter inkwell onTap - list

Question

so i have this page called screen1
its work fine and show the data
import 'package:flutter/material.dart';
import 'package:food_app/data/data.dart';
import 'package:food_app/views/home.dart';
class Screen1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("japanese recipes"),
backgroundColor: Colors.yellow,
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context , int index) {
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.white,
child: Image.asset(data[index]["image"])),
title: Text(data[index]["name"]),
subtitle:Text(data[index]["about"]),
),
);
}
)
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.yellow,
child: const Icon(Icons.home),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => HomePage()));
},
),
);
}
}
and my list data is this , has name and image , about
List data = [
{"name": "Chicken-Zosui","image":"assets/recipeApi/Chicken-Zosui.jpg", "about": "Zosui is a comforting Japanese rice soup that works beautifully with pantry-ready ingredients like ready-cooked rice, eggs, and leftover ingredients. The easy template is flexible, yet you’re guaranteed a nourishing meal at the end of the day."},
{"name": "Miso-Salmon","image":"assets/recipeApi/Miso-Salmon.jpg", "about": "Known for its Omega-3 fatty acid, salmon is a great protein to have in the diet. For that reason alone, I always have frozen salmon fillets in my freezer. This Miso Salmon recipe is really simple to make. You just need to marinate the fish for 30 minutes, you’d get a flavorful fish to serve for dinner. We love it with Japanese ginger rice."},
{"name": "Spam-Onigirazu","image":"assets/recipeApi/Spam-Onigirazu.jpg", "about": "Eggs, ham, sushi rice, and nori sheet. That’s all you need to make this yummy Spam Onigirazu. I used a special mold to create a perfect shape for the rice sandwich, but you really don’t need one."},
{"name": "Sweet-Onion","image":"assets/recipeApi/Sweet-Onion.jpg", "about": "This Japanese Mixed Rice is a one-pot wonder! You can literally cook it with any seasonal ingredients or pantry items you have in the refrigerator. Think dried mushrooms, canned tuna, sweet potatoes, carrots, etc."},
{"name": "Vegan-Miso-Soup","image":"assets/recipeApi/Vegan-Miso-Soup.jpg", "about": " cannot live without miso soup. Luckily, you can make a really good bowl of miso soup with only pantry items like dried kombu, silken tofu, and dried wakame. You can even enjoy it plain! Packed with umami goodness, it’s hands-down the easiest soup anyone can pull off anytime."},
{"name": "Yaki-Onigiri","image":"assets/recipeApi/Yaki-Onigiri.jpg", "about": "Lightly brushed with savory soy sauce, these grilled Japanese rice balls are simply irresistible. It requires only rice, salt, and sweet and soy sauce (or my take, delicious Unagi Sauce! It can be a store-bought or my homemade recipe on the blog). You can make them plain or stuffed them with fun fillings such as canned salmon. They are so easy to make that you want to grill them up at home!"},
{"name": "Yaki-Udon","image":"assets/recipeApi/Yaki-Udon.jpg", "about": "Japanese udon noodles stir-fried with vegetables and your choice of protein, Yaki Udon is definitely a keeper when comes to easy pantry meal."},
];
i want to add inkwell so every time user click on name list it go to another page with image and text about it

Answer 1

The ListTile widgets themselves have an onTap event and do not require InkWell
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.white,
child: Image.asset(data[index]["image"])),
title: Text(data[index]["name"]),
subtitle:Text(data[index]["about"]),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => YourNewPage(name:data[index]["name"],image:data[index]["image"]),),
);
},
);

Answer 2

IN listTile use oneTap for going your detail page and use constractor for passing your data.
import 'package:flutter/material.dart';
import 'package:food_app/data/data.dart';
import 'package:food_app/views/home.dart';
class Screen1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("japanese recipes"),
backgroundColor: Colors.yellow,
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context , int index) {
return Card(
child: ListTile(
onTap:(){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailsPage(name:data[index]["name"],image:data[index]["image"]),),
);}
leading: CircleAvatar(
backgroundColor: Colors.white,
child: Image.asset(data[index]["image"])),
title: Text(data[index]["name"]),
subtitle:Text(data[index]["about"]),
),
);
}
)
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.yellow,
child: const Icon(Icons.home),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => HomePage()));
},
),
);
}
}
The detail page will be like
import 'package:flutter/material.dart';
class DetailsPage extends StatefulWidget {
String name;
String image;
#override
_PatientListState createState() => _PatientListState();
}
class _PatientListState extends State<BloodDonateScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Deatils Page"),
),
body: SingleChildScrollView(
child: Container(
height: 600,
child: ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, index) {
return Container(
width: 300,
height: 260,
padding: new EdgeInsets.all(10.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
color: Colors.red,
elevation: 10,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.bloodtype, size: 40),
title: Text(
widget.name,
style: TextStyle(
fontSize: 20.0,
color: theme.changeColor? Colors.white: Colors.black)
),
],
),
],
),
),
);
},
),
),
),
);
}
);
}
}
Then in details page call your data with widget.name / widget.image