My Flutter app has 2 Material Apps stacked on top of each other, something like this:

Stack(
        children: [
          PopScope(
            child: MaterialApp(
              theme: ThemeData(
                fontFamily: 'Bahnschrift',
                brightness: Brightness.dark,
                scaffoldBackgroundColor: const Color(0xFF0E0E0E),
              ),
              debugShowCheckedModeBanner: false,
              home: App1(),
            ),
          ),
           PopScope(
            child: IgnoreTransparentPointer(
              child: MaterialApp(
              theme: ThemeData(
                fontFamily: 'Bahnschrift',
                brightness: Brightness.dark,
                scaffoldBackgroundColor: Colors.transparent
              ),
              debugShowCheckedModeBanner: false,
              home: App2(),
              ),
            ),
          ),
        ],
      ),

I also have the IgnoreTransparentPointer class, that should make every click event pass through the transparent pixels, but not the opaque ones. Here’s that class:

class IgnoreTransparentPointer extends SingleChildRenderObjectWidget {
  IgnoreTransparentPointer({required Widget child}) : super(child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderIgnoreTransparentPointer();
  }
}

class RenderIgnoreTransparentPointer extends RenderProxyBox {
  @override
  bool hitTest(BoxHitTestResult result, {required Offset position}) {
    return ignoreTransparent(position) && super.hitTest(result, position: position);
  }

  bool ignoreTransparent(Offset position) {
    var opaqueChild = child!.paintBounds;
    //print(opaqueChild);
    return opaqueChild.contains(position);
  }
}

I do not know what the logic for the ignoreTransparent function should be, so that it lets the events pass through the transparent pixels. I tried getting the opaque child, but it gives me the full screen as the paintBounds, so that is not helping.

How should I do this? I do not understand.