Flutter gesturedetector not working in stack widget

Question

I am using the stack widget to show the back arrow button on an image. And its showing but the problem is it's not tappable mean Gesturededector is not working on Stack.

My code

  Stack(
      children: <Widget>[

        Container(
          height: height * 0.4,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(
                'assets/images/place2.jpg',
              ),
              fit: BoxFit.fill,
            ),
          ),
        ),
        GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () => print("first container"),
          child: Align(
            alignment: Alignment.topLeft,
            child: Container(
              margin: EdgeInsets.only(left: width * 0.03),
              padding: EdgeInsets.only(top: statusBarHeight * 2),

              child: Icon(
                Icons.arrow_back_ios,
                size: 25,
                color: Colors.white,
              ),
            ),
          ),
        ),

        SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.only(top: height * 0.3),
            child: SingleChildScrollView(
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(30),
                    topLeft: Radius.circular(30)),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      SizedBox(
                        height: height * 0.05,
                      ),
                      Container(
                        width: width,
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Text(
                          'NYC Food Festival',
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 30),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Row(
                          children: <Widget>[
                            Icon(
                              Icons.calendar_today,
                              size: 20,
                              color: Color(0xff808080),
                            ),
                            SizedBox(width: width * 0.02), // give it width
                            Column(
                              children: <Widget>[
                                Text(
                                  'Sat, May 25, 2020',
                                  style: TextStyle(
                                      color: Color(0xff000000),
                                      fontWeight: FontWeight.bold,
                                      fontSize: 15),
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Row(
                          children: <Widget>[
                            Icon(
                              Icons.attach_money,
                              size: 20,
                              color: Color(0xff808080),
                            ),
                            SizedBox(width: width * 0.02), // give it width
                            Column(
                              children: <Widget>[
                                Text(
                                  '25,000 PKR',
                                  style: TextStyle(
                                      color: Color(0xff000000),
                                      fontWeight: FontWeight.bold,
                                      fontSize: 15),
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        width: width,
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Text(
                          'Snaps',
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 25),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                          child: Column(
                            children: <Widget>[
                              CarouselSlider(
                                options: CarouselOptions(
                                  autoPlay: true,
                                  aspectRatio: 2.0,
                                  enlargeCenterPage: true,
                                ),
                                items: imageSliders,
                              ),
                            ],
                          )),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        width: width,
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Text(
                          'About',
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 25),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                          padding: EdgeInsets.only(
                              right: width * 0.03, left: width * 0.03),
                          child: DescriptionTextWidget(
                              text:
                                  "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.")
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Container(
                        width: width,
                        margin: EdgeInsets.only(left: width * 0.03),
                        child: Text(
                          'Included',
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 25),
                        ),
                      ),
                      SizedBox(
                        height: height * 0.02,
                      ),
                      Included(),
                      SizedBox(
                        height: height * 0.01,
                      ),
                      Included(),
                      SizedBox(
                        height: height * 0.01,
                      ),
                      Included(),
                      SizedBox(
                        height: height * 0.01,
                      ),




                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            height: 100,
            decoration: BoxDecoration(
              // color: Color.fromARGB(110, 255, 255, 255),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
              gradient: LinearGradient(
                colors: [
                  Color.fromARGB(30, 255, 255, 255),
                  Color.fromARGB(255, 255, 255, 255),
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
            child: Center(
              child: InkWell(
                child: Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 80,
                    vertical: 20,
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    color: Colors.blueAccent,
                  ),
                  child: Text(
                    "BOOK NOW",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                        color: Colors.white),
                  ),
                ),
                onTap: () {
                  return print("Tap");
                },
              ),
            ),
          ),
        ),
      ],
    )

I need to use it as a back button when I navigate but it's not working then for testing I just print a value onTap but its also not working I try to add behaviour also.

Answer 1

Can you try putting GestureDectector after SingleChildScrollView in a stack.

I guess SingleChildScrollView is lying above GestureDetector since it is a stack.

SingleChildScrollView(),
GestureDetector(),