Is there any way to tap through a overlay in Flutter

How to tap through a flutter overlay using overlay_popup?

I have implemented a circle as a overlay in my flutter app and I have tried several ways to tap through the overlayed circle bu when i tap on the overlayed circle i cant tap through the circle. As i want to tap through the circle for the apps and other things that are underneath the circle i need my screen to working for on taps as on overlay.

I am expecting a code corection or a code snippet that solves my problem.

import 'package:flutter/material.dart';
import 'package:overlay_pop_up/overlay_pop_up.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isActive = false;

  @override
  void initState() {
    super.initState();
    overlayStatus();
  }

  Future<void> overlayStatus() async {
    isActive = await OverlayPopUp.isActive();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter overlay pop up'),
          backgroundColor: Colors.red[900],
        ),
        body: Center(
          child: MaterialButton(
            onPressed: () async {
              final permission = await OverlayPopUp.checkPermission();
              if (permission) {
                if (!await OverlayPopUp.isActive()) {
                  isActive = await OverlayPopUp.showOverlay(
                    width: 300,
                    height: 300,
                    closeWhenTapBackButton: false,
                    isDraggable: true,
                  );
                  setState(() {});
                } else {
                  final result = await OverlayPopUp.closeOverlay();
                  setState(() {
                    isActive = (result == true) ? false : true;
                  });
                }
              } else {
                await OverlayPopUp.requestPermission();
                setState(() {});
              }
            },
            color: Colors.red[900],
            child: Text(
              isActive ? 'Close overlay' : 'Show overlay',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

@pragma("vm:entry-point")
void overlayPopUp() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: OverlayWidget(),
    ),
  );
}

class OverlayWidget extends StatelessWidget {
  const OverlayWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent, // Set the color to transparent
      child: GestureDetector(
        behavior: HitTestBehavior.translucent, // Allow taps to pass through
        onTap: () {}, // Allow tap through
        child: Stack(
          children: [
            Positioned.fill(
              child: Draggable(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.red.withOpacity(0.3), // Red color with less opacity
                        border: Border.all(color: Colors.red, width: 2.0), // Bold outline
                        shape: BoxShape.circle,
                      ),
                    ),
                    Center(
                      child: Text(
                        '•', // Dot character
                        style: TextStyle(
                          fontSize: 40, // Adjust the size of the dot as needed
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ],
                ),
                feedback: Material(
                  color: Colors.transparent,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.red.withOpacity(0.3), // Red color with less opacity
                      border: Border.all(color: Colors.red, width: 2.0), // Bold outline
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
                onDraggableCanceled: (_, __) {}, // Allow dragging
              ),
            ),
          ],
        ),
      ),
    );
  }
}

>Solution :

It seems that you can set backgroundBehavior to OverlayFlag.tapThrough in the OverlayPopUp.showOverlay call, so based on your code:

isActive = await OverlayPopUp.showOverlay(
   width: 300,
   height: 300,
   closeWhenTapBackButton: false,
   isDraggable: true,
   backgroundBehavior: OverlayFlag.tapThrough, // add this line
);