I’m trying to implement an overlay widget in my Flutter app that allows users to both drag and tap on it. The overlay should display a draggable circular widget that users can move around the screen by dragging it, and they should also be able to tap on the overlay to perform certain actions.

I’ve tried using a combination of GestureDetector and Draggable widgets to achieve this, but I’m facing difficulty in getting both functionalities to work simultaneously. Either the dragging works, or tapping works, but not both together.

I have recently implemented the tap through overlay functionality but i am unalbe to drag the circle overlay now. Can anyone help me BTW I am using flutter_overlay_pop_up plugin for this

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 deepu '),
          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,
                    backgroundBehavior: OverlayFlag.tapThrough,
                    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 GestureDetector(
      onTap: () {
        print('Overlay tapped!');
      },
      child: IgnorePointer(
        ignoring: false, // Set to true to disable all pointer events
        child: Material(
          color: Colors.transparent, // Set the color to transparent
          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
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

``