add a method ontap() in my listview in flutter - flutter

Question

for adding a method ontap() in my listview with a custom class that I made for it look of a tile
i tried adding ontap(): but don't recognized it says
here is the code
class _MenuCard extends StatelessWidget {
final String headImageAssetPath;
final IconData icon;
final Color iconBackgroundColor;
final String title;
final String subtitle;
final int heartCount;
_MenuCard({
this.headImageAssetPath,
this.icon,
this.iconBackgroundColor,
this.title,
this.subtitle,
this.heartCount,
});
#override
Widget build(BuildContext context) {
return new Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
child: new Card(
elevation: 10.0,
child: new Column(
children: [
new Image.asset(
headImageAssetPath,
width: double.infinity,
height: 100.0,
fit: BoxFit.cover,
),
new Row(
children: [
new Padding(
padding: const EdgeInsets.all(15.0),
child: new Container(
padding: const EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: iconBackgroundColor,
borderRadius: new BorderRadius.all(const Radius.circular(15.0)),
),
child: new Icon(
icon,
color: Colors.white,
),
),
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Text(
title,
style: const TextStyle(
fontSize: 25.0,
fontFamily: 'mermaid',
),
),
new Text(
subtitle,
style: const TextStyle(
fontSize: 16.0,
fontFamily: 'bebas-neue',
letterSpacing: 1.0,
color: const Color(0xFFAAAAAA),
),
),
],
),
),
new Container(
width: 2.0,
height: 70.0,
decoration: new BoxDecoration(
gradient: new LinearGradient(
colors: [
Colors.white,
Colors.white,
const Color(0xFFAAAAAA),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
new Padding(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
child: new Column(
children: [
new Icon(
Icons.favorite_border,
color: Colors.red,
),
new Text(
'$heartCount',
),
],
),
),
],
),
],
),
),
);
}
}
this code is of class that I use to build my listview in the scaffold of the stateless widget.
and here is how I am building my listview after returning scaffold in body:
the code is below
body: new ListView(
children: [
new _MenuCard(
headImageAssetPath: 'images/img.png',
icon: Icons.fastfood,
iconBackgroundColor: Colors.orange,
title: 'il domacca',
subtitle: "78 5TH AVENUE, NEW YORK",
heartCount: 84
),
new _MenuCard(
headImageAssetPath: 'images/img.png',
icon: Icons.local_dining,
iconBackgroundColor: Colors.red,
title: 'Mc Grady',
subtitle: "79 5TH AVENUE, NEW YORK",
heartCount: 84
),
new _MenuCard(
headImageAssetPath: 'images/img.png',
icon: Icons.fastfood,
iconBackgroundColor: Colors.purpleAccent,
title: 'Sugar & Spice',
subtitle: "80 5TH AVENUE, NEW YORK",
heartCount: 84
),
]
),

Answer 1

You can wrap you custom list item widget inside a GestureDetector which has an onTap callback method you can specify.
Example -
class _MenuCard extends StatelessWidget {
final String headImageAssetPath;
final IconData icon;
final Color iconBackgroundColor;
final String title;
final String subtitle;
final int heartCount;
final VoidCallback onTapCallback; //Add this custom onTap method
_MenuCard({
this.headImageAssetPath,
this.icon,
this.iconBackgroundColor,
this.title,
this.subtitle,
this.heartCount,
this.onTapCallback,
});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTapCallback,
child: new Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
child: //Rest of your code
),
);
}
}
And inside ListView you can specify your custom onTapCallback.
body: new ListView(
children: [
new _MenuCard(
headImageAssetPath: 'images/img.png',
icon: Icons.fastfood,
iconBackgroundColor: Colors.orange,
title: 'il domacca',
subtitle: "78 5TH AVENUE, NEW YORK",
heartCount: 84,
onTapCallback: () {
// Your onTap code goes here
}
),
// Rest of your code
]
)
Besides onTap, the GestureDetector widget also has a lot of other user event callbacks. You can find out more about them here.
Also, the same functionality can also be achieved with the help of the InkWell widget, you will just need to replace GestureDetector with InkWell and the rest of the code will remain same. Documentation for the widget can be found here.
Hope this helps!