How to make clickable widget behind stack in flutter

Question

I have two scaffold widget in the stack for some purposes.. And every scaffold has its own contents. the second scaffold has transparent background colors so the first scaffold is visible.

Stack(
  children: [
    Scaffold(
      body: GestureDetector(
        onTap: () {},
        child: myBody(),
      ),
    ),
    Scaffold(
      backgroundColor: Colors.transparent,
      body: ListView.builder(
        itemBuilder: (context, index) => ...,
      ),
    )
  ],
),

the GestureDetector in first Scaffold does not work and that's because of the Scaffold stack

Note: I can't wrap the second Scaffold with IgnorePointer because it has clickable ListView.bulder which gonna be ignoring any pointer too

How could I solve this ×_O

Answer 1

You can get callback method from second scaffold list item tap. And create a function on level that will be provided on first scaffold GestureDetector .

void main(List<String> args) {
  Widget myBody() {
    return Container(
      color: Colors.cyanAccent.withOpacity(.3),
    );
  }

  void topLevelGesture() {
    debugPrint("got hit on GestureDetector");
  }

  runApp(
    MaterialApp(
      home: Stack(
        children: [
          Scaffold(
            body: GestureDetector(
              onTap: topLevelGesture,
              child: myBody(),
            ),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            body: ListView.builder(
              itemBuilder: (context, index) => ListTile(
                title: Text("item $index"),
                onTap: () {
                  topLevelGesture();
                  print("tapped $index");
                },
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

Answer 2

You can set Gesture as outside of the stack and with this inner list click also works but when you put the first Scaffold body as a clickable it's not working because the second Scaffold overlay that.

GestureDetector(
         onTap(){}
         child:Stack(
    children[
       Scaffold(
       body:   myBody()
        
         )
      Scaffold(
       backGroundColor: Colors.transparent
       body: ListView.bulder(){....}
       )
     ]
    ))

Answer 3

You need to add clickable widget at the end in your stack widget as below:

   Stack(
    children[
      firstWidget(),
      GestureDetector(
      onTap(){},
      child:  secondWidget()
      )
      
   ]
   )