Flutter: Pressing on Card Widget in ListView Not Working - flutter

Question

I have ListView builder adsList which contains LstTiles adTile contains the Card.
When I press the Card widget I expect an action and to navigate to another screen or just print in console, but nothing happens although I wrapped the card inside GestureDetector.
here is the code
class _AdTileState extends State<AdTile> {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 8),
child: GestureDetector(
onTap: (){
print('card pressed');
Navigator.push(context, new MaterialPageRoute(builder: (context) => AdView()));
},
child: Card(
margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
child: ListTile(
trailing: Image.network(widget.adModel.adImage),
title: Text(widget.adModel.adName),
subtitle: Text(widget.adModel.location),
),
),
),
);
}
}
Here is the code inside AdList:
class _AdsListState extends State<AdsList> {
#override
Widget build(BuildContext context) {
final ads = Provider.of<List<AdModel>>(context);
return ListView.builder(
scrollDirection: Axis.vertical,
itemCount:(ads == null) ? 0 : ads.length,
itemBuilder: (context, index){
return
CustomAdTile(adModel: ads[index],);
});
}
}
And here is the code on the Page which show the ListView Builder:
Widget build(BuildContext context) {
return StreamProvider<List<Profile>>.value(
value: DatabaseService().profiles,
child: StreamProvider<List<AdModel>>.value(
value: DatabaseService().ads,
child: Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Container(),
Row(),
Expanded(
child: AdsList()
),
],
),
Code for CustomAdTile:
class _CustomAdTileState extends State<CustomAdTile> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.adModel.adName,
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14.0,
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
Text(
widget.adModel.location,
style: const TextStyle(fontSize: 10.0),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),
Text(
'${widget.adModel.category} views',
style: const TextStyle(fontSize: 10.0),
),
],
),
),
),
const Icon(
Icons.more_vert,
size: 16.0,
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage(widget.adModel.adImage),
fit: BoxFit.fill),
),
)
],
),
);
}
}

Answer 1

It looks like you are never using AdTile, you are using CustomAdTile. You need to add the onTap inside CustomAdTile.
Here is the updated code for CustomAdTile.
class _CustomAdTileState extends State<CustomAdTile> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: InkWell(
///Add onTap here
onTap: () {
print('card pressed');
Navigator.push(
context, new MaterialPageRoute(builder: (context) => AdView()));
},
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.adModel.adName,
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14.0,
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
Text(
widget.adModel.location,
style: const TextStyle(fontSize: 10.0),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),
Text(
'${widget.adModel.category} views',
style: const TextStyle(fontSize: 10.0),
),
],
),
),
),
const Icon(
Icons.more_vert,
size: 16.0,
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(widget.adModel.adImage),
fit: BoxFit.fill),
),
)
],
),
),
);
}
}