Flutter：在 ListView 中按下卡片小部件不起作用

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),
              ),
            )
          ],
        ),
      ),
    );
  }
}