GestureDetector not working in Stack widget

Question

So I'm trying to make a Stack of two buttons using GestureDetector where if I press one, it will overlap the other by half. But it's not detecting any gestures like onTap. I tried changing to InkWell and TextButton but it still doesn't work. I also tried to change the behavior but that too doesn't work. Can anyone help me solve this one?

Here's a snippet of the code:

class StatistikDanLeaderboard extends StatelessWidget {
  final bool ispressed1;
  final bool ispressed2;
  final void Function() function1;
  final void Function() function2;
  const StatistikDanLeaderboard({
    Key key,
    this.ispressed1,
    this.ispressed2,
    this.function1,
    this.function2,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (ispressed1) {
      return Stack(
        alignment: Alignment.centerLeft,
        children: [
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () => function1,
            child: Container(
              padding: EdgeInsets.only(right: 46.9),
              alignment: Alignment.centerRight,
              height: 29,
              width: 372,
              child: Text(
                'Leaderboard',
                style: TextStyle(
                  fontFamily: fontFamily1,
                  fontSize: fontSize2,
                  fontWeight: fontWeightThin,
                  color: Color.fromRGBO(51, 51, 51, 0.25),
                  letterSpacing: letterSpacingDefault,
                ),
              ),
              decoration: BoxDecoration(
                color: objectWhite,
                border: Border.all(color: borderColorGrey),
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),
          GestureDetector(
            behavior: HitTestBehavior.translucent,
            onTap: () => function2,
            child: Container(
              alignment: Alignment.center,
              child: Text(
                'Statistik',
                style: TextStyle(
                    fontFamily: fontFamily1,
                    fontWeight: fontWeightThick,
                    fontSize: fontSize2,
                    color: objectWhite,
                    letterSpacing: letterSpacingDefault),
              ),
              height: 29,
              width: 190.43,
              decoration: BoxDecoration(
                color: clickable1,
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),
        ],
      );

Answer 1

The GestureDetector work correctly but your callback function is not right. you could try the below code snippet just copy-paste this code and enjoy.

  class StatistikDanLeaderboard extends StatelessWidget {
  final bool? ispressed1;
  final bool? ispressed2;
  final  ValueChanged? function1;
  final  ValueChanged? function2;
  const StatistikDanLeaderboard({
    Key? key,
    this.ispressed1,
    this.ispressed2,
    this.function1,
    this.function2,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (ispressed1) {
      return Scaffold(
        appBar: AppBar(),
        body: Stack(
          alignment: Alignment.centerLeft,
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => print('Leaderboard'),
              child: Container(
                padding: EdgeInsets.only(right: 46.9),
                alignment: Alignment.centerRight,
                height: 29,
                width: 372,
                child: Text(
                  'Leaderboard',
                  style: TextStyle(
                    fontFamily: fontFamily1,
                    fontSize: fontSize2,
                    fontWeight: fontWeightThin,
                    color: Color.fromRGBO(51, 51, 51, 0.25),
                    letterSpacing: letterSpacingDefault,
                  ),
                ),
                decoration: BoxDecoration(
                  color: objectWhite,
                  border: Border.all(color: borderColorGrey),
                  borderRadius: BorderRadius.circular(20),
                ),
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: () {var callback=function1;
              if(callback!=null){
                var a=1;
                callback(a);
              }
              },
              child: Container(
                alignment: Alignment.center,
                child: Text(
                  'Statistik',
                  style: TextStyle(
                      fontFamily: fontFamily1,
                      fontWeight: fontWeightThick,
                      fontSize: fontSize2,
                      color: objectWhite,
                      letterSpacing: letterSpacingDefault
    ),
                ),
                height: 29,
                width: 190.43,
                decoration: BoxDecoration(
                  // color: clickable1,
                  borderRadius: BorderRadius.circular(20),
                ),
              ),
            ),
          ],
        ),
      );}else{return Container();}
}

And you can call this from anyWhere like this

 StatistikDanLeaderboard(
        function1: (a){ print('Statistik');},
        function2: (a){print('Leaderboard');},
      ),

Answer 2

You are not actually calling the function on tap. This is how you can do it -> onTap: (){ function1();}

Answer 3

To handle ontap event for child of Stack widget you can use : transparent_pointer

Sample Code :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          onVerticalDragStart: (_) => print("Background drag started"),
        ),
        Positioned(
          top: 60,
          left: 60,
          height: 60,
          width: 60,
          child: TransparentPointer(
            child: TextButton(
              child: Text("Tap me"),
              onPressed: () => print("You tapped me"),
            ),
          ),
        ),
      ],
    );
  }
}