Gesture detector can't Trigger inside StackView

Question

The Issue is similarly in Flutter Github : https://github.com/flutter/flutter/issues/23454 . I have messy problem with Gesture Detector. the method onTap() doesn't give me print out. It's looks like static, however i have put it in stateful widget and I have written it in Stateful Widget which snippet code like below:

class HeaderData extends StatefulWidget {

  @override
  _HeaderDataState createState() => _HeaderDataState();
}

class _HeaderDataState extends State<HeaderData> {
  List<String> lsDummy = ['image1',
    'image2',
    'image3'
  ];

  @override
  Widget build(BuildContext context) {

    return Stack(
      children: <Widget>[
        Container(
          height: 250,
          child: Swiper(
            autoplayDelay: 3000,
              itemCount: lsDummy.length,
            autoplay: true,
            pagination: SwiperPagination(),
            itemBuilder: (context, index){
                return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
            },
          ),
        ),
        Container(
          padding: const EdgeInsets.only(left: 16.0, right: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const SizedBox(height: 70),
                  Image(
                    image: AssetImage('images/travel_logo.png'),
                    alignment: Alignment.center,
                    width: 200,
                    color: Colors.blue,
                  ),
                  const SizedBox(height: 20.0),
                ],
              ),
              GestureDetector(
              onTap: (){
                print('test');
              }, 
                  child: Container(
                    padding: EdgeInsets.all(4),
                      child: Icon(Icons.settings, color: Colors.white,)
                  )
              ),

            ],
          ),
        ),

        Padding(
          padding: const EdgeInsets.only(top: 150),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),
        SizedBox(height: 10.0),
      ],
    );
  }
}

If we run the apps this widget will render like this picture. Can someone help me why this happened? if you think that this question is unclear let me know. So i can update the question

UPDATE I have tried the code by using iconButton but still can't trigger print

return Stack(
      children: <Widget>[
        Container(
          height: 250,
          child: Swiper(
            autoplayDelay: 3000,
              itemCount: lsDummy.length,
            autoplay: true,
            pagination: SwiperPagination(),
            itemBuilder: (context, index){
                return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
            },
          ),
        ),
        Container(
          padding: const EdgeInsets.only(left: 16.0, right: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const SizedBox(height: 70),
                  Image(
                    image: AssetImage('images/travel_logo.png'),
                    alignment: Alignment.center,
                    width: 200,
                    color: Colors.blue,
                  ),
                  const SizedBox(height: 20.0),
                ],
              ),
              IconButton(
                  icon: Icon(Icons.settings, color: Colors.white,),
                  onPressed: ()=> print('test')
              )
            ],
          ),
        ),

        Padding(
          padding: const EdgeInsets.only(top: 150),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),
        SizedBox(height: 10.0),
      ],
    );

UPDATE 2 I made new experiment for this. I try to make dummy container which its above of other widget. Then i set the Gesture Detector. but still i don't reach the print out. Here my code and the picture of widgets. Btw, there are similar question in flutter github, here : https://github.com/flutter/flutter/issues/23454 The ticket issue still open.

@override
  Widget build(BuildContext context) {

    return Stack(
      children: <Widget>[
        Container(
          height: 250,
          child: Swiper(
            autoplayDelay: 3000,
              itemCount: lsDummy.length,
            autoplay: true,
            pagination: SwiperPagination(),
            itemBuilder: (context, index){
                return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
            },
          ),
        ),

        Padding(
          padding: const EdgeInsets.only(top: 150),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 50),
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.only(top: 50),
          child: Image(image: AssetImage('images/travel_logo.png'),
            alignment: Alignment.center,
            width: 200,
            color: Colors.blue,),
        ),
        GestureDetector(
          onTap: (){
            print('teste');
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.grey,
          ),
        )
      ],
    );

  }

the Stack widgets maintains the position of the widget, to get you GestureDetector detected, place it at the end of the Stack Widget which will place your GestureDetector at the top of the stack — Yogesh Chawla, Mar 05 '20 at 04:47
But, i only need the Gesture detector works only for the Setting icon, as you can see in circle of picture. if i put it on Top of stack, it might triggers other widgets right? — Nanda Z, Mar 05 '20 at 04:55
If you just want the SettingsIcon click you can use IconButton widget — Yogesh Chawla, Mar 05 '20 at 05:24
Have you tried wrap the widgets except Setting section with `IgnorePointer`? If that's the only clickable section, you might want to do this. I'm not sure If this fit your need. — Tokenyet, Mar 05 '20 at 05:36
@YogeshChawla i have tried IconBotton like this: IconButton( icon: Icon(Icons.settings, color: Colors.white,), onPressed: (){ print('oke'); } ), but still not trigger print — Nanda Z, Mar 05 '20 at 06:44
@YogeshChawla again, i use iconbutton then it's works... but the trigger is outside of the icon. Okay thats not big problem, but thank you so much — Nanda Z, Mar 05 '20 at 14:00

Henok · Answer 1 · 2020-03-05T05:30:45.440

Try Adding the container at the bottom of the list to make sure it is not covered by other widgets.


class HeaderData extends StatefulWidget {

  @override
  _HeaderDataState createState() => _HeaderDataState();
}

class _HeaderDataState extends State<HeaderData> {
  List<String> lsDummy = ['image1',
    'image2',
    'image3'
  ];

  @override
  Widget build(BuildContext context) {

    return Stack(
      children: <Widget>[
        Container(
          height: 250,
          child: Swiper(
            autoplayDelay: 3000,
              itemCount: lsDummy.length,
            autoplay: true,
            pagination: SwiperPagination(),
            itemBuilder: (context, index){
                return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
            },
          ),
        ),

        Padding(
          padding: const EdgeInsets.only(top: 150),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),


        SizedBox(height: 10.0),

 Container(
          padding: const EdgeInsets.only(left: 16.0, right: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const SizedBox(height: 70),
                  Image(
                    image: AssetImage('images/travel_logo.png'),
                    alignment: Alignment.center,
                    width: 200,
                    color: Colors.blue,
                  ),
                  const SizedBox(height: 20.0),
                ],
              ),
              GestureDetector(
              onTap: (){
                print('test');
              }, 
                  child: Container(
                    padding: EdgeInsets.all(4),
                      child: Icon(Icons.settings, color: Colors.white,)
                  )
              ),

            ],
          ),
        ),

      ],
    );
  }
}

@NandaZ I updated the answer try this and let me know the results. — Henok, Mar 05 '20 at 05:31
i don't know which part should i change.. please explain me which container? — Nanda Z, Mar 05 '20 at 06:57
I posted the code you could have copied and tried running it, put Container which contains the GestureDetector as a child at the bottom of the stack. — Henok, Mar 05 '20 at 07:01
i have put it to the bottom position below Sizebox. But still not working... :( — Nanda Z, Mar 05 '20 at 07:19

Jiten Basnet · Answer 2 · 2020-03-05T07:18:24.437

0

Ok I just found your problem. I just used your code and found that the setting Icon appears below Container with the row. The solution can be to increase the bottom padding of the Icon like so:

             GestureDetector(
                  onTap: (){
                    print('test');
                  },
                  child: Container(
                         padding: EdgeInsets.only(bottom: 50), //this is the changes
                         child: Icon(Icons.settings, color: 
                         Colors.white,))

Another solution is to increase the margin symmetric of the container containing child Text 'PILIH DESTINASI' like below:

      Padding(
           padding: const EdgeInsets.only(top: 150),
           child: Container(
            margin: EdgeInsets.symmetric(horizontal: 50), //this is the changes
            height: 50,
            width: double.infinity,
            decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.8),
                borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('PILIH DESTINASI', style: TextStyle(color: 
                Colors.white),),
                SizedBox(width: 10,),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),

edited Mar 05 '20 at 07:18

answered Mar 05 '20 at 06:48

Jiten Basnet

1,623
15
31

I have tried this code, please check my update question. Still not works – Nanda Z Mar 05 '20 at 06:55
please check the updated answer. I already tried it and its working now. – Jiten Basnet Mar 05 '20 at 07:19
I have tried this, but still not working... i am sorry. If you want to se what i have wrote is like below: https://www.dropbox.com/s/t67wwu9axmuq2xq/main_page.dart?dl=0 – Nanda Z Mar 05 '20 at 07:44
can you please re-read and check the comments there in the code and about the changes? Also, try removing the image you have used. and make sure the Icon appears above it. – Jiten Basnet Mar 05 '20 at 07:47
Also, set the black colour in your scaffold to see all the other bright widgets, that way you can see what's happening in the stack widget. The padding might differ according to the device sizes. I have checked on a small device. – Jiten Basnet Mar 05 '20 at 07:56
thank you for the answer, i made other experiment and renew the question (update 2). But still i can't reach onTap method in Gesture Detector. You can see my container are on the top of others but still failed – Nanda Z Mar 05 '20 at 10:04

Gesture detector can't Trigger inside StackView

2 Answers2