CODEWITHSUNDEEP
flutter
bchoisy
bchoisy

Reputation: 91

Flutter - Ontap InkWell doesn't work inside Stack

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

Upvotes: 5

Views: 6825

Answers (4)

XiaoHui
XiaoHui

Reputation: 73

I had the same problem too, turns out the solution is change the orders of items in stacks.

The Ink Well widget is covered with the next Stack element.

Move your Ink Well widget to the last of the Stack children.

Upvotes: 4

VolcanoCoder
VolcanoCoder

Reputation: 733

I had the same problem as you! Put the Stack in a container and give it a certain width.

Stack It must have a certain size so that the widgets do not protrude from it.

Upvotes: -1

DonAlex1897
DonAlex1897

Reputation: 65

I faced the same problem. Wrapping Inkwell's child inside an IgnorePointer solved the issue.

Solved here: Flutter - InkWell not reacting to onTap inside Flexible

Upvotes: 2

sixtysticks
sixtysticks

Reputation: 816

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,
                ),
        ...

Upvotes: 1

Related Questions