Flutter nested GestureDetector doesn't work

Question

everyone! I have a list of items. The main Widget in the list is Card. I wanna wrap it in a GestureDetector to catch tap event on a whole card. I also have Stack inside the card where I have bookmark icon. I am trying to wrap this icon into GestureDetector but it doesn't work.

My item:

@override
Widget build(BuildContext context) {
// TODO: implement build
return Card(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
  child: Column(
    children: <Widget>[
      Stack(
        children: <Widget>[
          ClickableIcon(_model._bookmarked),
          Container(
            height: 128.0,
            constraints: BoxConstraints(minWidth: double.infinity),
            child: Image.network(_model._headerSource),
          ),
        ],
      ),
      Container(
        height: 72,
        constraints: BoxConstraints(minWidth: double.infinity),
        child: Row(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(left: 16.0, right: 16.0),
              child: CircleAvatar(
                radius: 20.0,
                backgroundImage: NetworkImage(_model._organizerLogo),
                backgroundColor: Colors.transparent,
              ),
            ),
            Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    _model._eventName,
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.black,
                        fontWeight: FontWeight.w500),
                    textAlign: TextAlign.start,
                  ),
                  SizedBox(
                    height: 8,
                  ),
                  Text(
                    "${_model._timeStart} ${_model._guide}",
                    style: TextStyle(
                        fontSize: 12,
                        color: Color(GoEngColors.secondaryTextColor),
                        fontWeight: FontWeight.w500),
                  )
                ])
          ],
        ),
      )
    ],
  ),
);
}

Clickable icon code:

class _ClickableIconState extends State<ClickableIcon> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return InkWell(
  onTap: () {
    print("bookmarked");
    setState(() {
      print("state updated");
      widget.selected = !widget.selected;
    });
  },
  child: Container(
    child: Icon(widget.selected
        ? CustomIcon.MyFlutterApp.icon_mark_applouded_1
        : CustomIcon.MyFlutterApp.icon_mark_empty_1),
    alignment: Alignment.topRight,
  ),
  );
}
}

I tried both GestureDetector and InkWell but none of them gave an expected result. I also tried to set a behaviour for a GestureDetector, but it didn't help as well.

So my question is as follows: how to make icon clickable remaining click implementation for the whole card? Thanks!

EDIT

Using IconButton instead of Icon didn't help.

Answer 1

I think your stack order need to be reversed

Stack(
        children: <Widget>[
          Container(
            height: 128.0,
            constraints: BoxConstraints(minWidth: double.infinity),
            child: Image.network(_model._headerSource),
          ),
          ClickableIcon(_model._bookmarked),
        ],
      ),

please, test and let me know if it worked for you.