如何在flutter中拖动叠加层？

Question

最近，我在我的 flutter 应用程序中的 Overlayed 小部件上实现了通过功能进行点击，该小部件是一个允许点击通过的圆圈，但现在我无法拖动我想要同时完成这两个任务的圆圈。谁能告诉我这是我尝试过的代码。

我使用了 flutter_overlay_pop_up 插件来实现此目的，我需要点击叠加层并同时拖动它。我尝试了很多方法但对我不起作用。在代码中通过后台行为后，我无法拖动圆圈。谁能告诉我这件事。预先感谢。

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,
      child: IgnorePointer(
        ignoring: true, // Ignore pointer events
        child: GestureDetector(
          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
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

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

@override
Widget build(BuildContext context) {
 return Material(
  color: Colors.transparent,
  child: IgnorePointer(
    ignoring: false,
    child: GestureDetector(
      onTap: () {},
      child: Stack(
        children: [
          Positioned(
            left: 0,
            top: 0,
            child: Draggable(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.red.withOpacity(0.3),
                  border: Border.all(color: Colors.red, width: 2.0),                      
                  shape: BoxShape.circle,
                ),
                width: 100, 
                height: 100, 
                child: Center(
                  child: Text(
                    '•',
                    style: TextStyle(
                      fontSize: 40, 
                ),
              ),
              onDraggableCanceled: (_, __) {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}