Flutter - Ontap InkWell doesn't work inside Stack

0

I start with flutter and I have a problem using onTap ().

I used adobeXd to make my templates but It seems that I can't put GestureDetector and InkWell widgets.

Transform.translate(
        offset: Offset(MediaQuery.of(context).size.width / 30, 132.0),
        child:
        Stack(
          children: <Widget>[
            Transform.translate(
              offset: Offset(MediaQuery.of(context).size.width / 1.7, 1.0),
              child:
              InkWell(
                onTap: (){
                  setState(() {
                    actu = true;
                  });
                  print('ink');

                },
                child: Stack(
                  children: <Widget>[
                    Container(
                      width: MediaQuery.of(context).size.width / 2.85,
                      height: 36.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(19.0),
                        color: const Color(0x35ffffff),
                      ),
                    ),
                    Transform.translate(
                      offset: Offset(MediaQuery.of(context).size.width / 3.7, 6.0),
                      child:
                      // Adobe XD layer: 'Icones/actualiser' (component)
                      XDIconesactualiser(),
                    ),
                    Transform.translate(
                      offset: Offset(MediaQuery.of(context).size.width / 21.47, MediaQuery.of(context).size.height / 110),
                      child:
                      SizedBox(
                        width: 75.0,
                        height: 27.0,
                        child: Text(
                          'Actualiser',
                          style: TextStyle(
                            fontFamily: 'OpenSans-SemiBold',
                            fontSize: 14,
                            color: const Color(0xffffffff),
                          ),
                          textAlign: TextAlign.left,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),

The onTap does not work. It seems that is when it's inside a Stack or a Transform. Can you help me ?

Edit :

the event is not triggered. Nothing happens as if it did not exist. When I look at the tree in the dev tool, the inkwell appears but when I click on the phone nothing happens

The image of my Flutter tree

Edit 2 :

I would like a structure like that

Expected

but when I deactivate the offset for the click to work. i get that

Reality

flutter
asked on Stack Overflow Jul 12, 2020 by bchoisy • edited Jul 15, 2020 by bchoisy

1 Answer

0

If it's the inkwell animation you need, remove the BoxDecoration from the Container widget (or remove altogether if only used for the decoration), and wrap the inner Stack within an Ink widget with the color set to your original box decoration color. This worked for me.

child: Stack(
  children: <Widget>[
    Transform.translate(
      offset: Offset(MediaQuery.of(context).size.width / 1.7, 1.0),
      child: InkWell(
        onTap: () {
          setState(() {
            actu = true;
          });
          print('ink');
        },
        child: Ink(
          color: const Color(0x35ffffff),
            child: Stack(
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width / 2.85,
                  height: 36.0,
                ),
        ...
answered on Stack Overflow Jul 12, 2020 by sixtysticks • edited Jul 12, 2020 by sixtysticks

User contributions licensed under CC BY-SA 3.0