How to make clickable widget behind stack in flutter

user_16213673 0
Viewed 109

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 Scaffolddoes 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

flutter-layout dart flutter
3 Answers

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");
                },
              ),
            ),
          ),
        ],
      ),
    ),
  );
}
user_101571270

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(){....}
       )
     ]
    ))
user_115579060

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

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