Flutter中如何让Overlay圆形组件同时支持点击穿透与拖拽？

问题原因 #

你当前的代码中，整个Overlay被IgnorePointer(ignoring: true)包裹，导致所有指针事件都被忽略，包括Draggable组件的拖拽事件，这就是无法拖拽的核心原因。要同时实现空白区域点击穿透和圆形组件可拖拽，不能全局忽略指针，而是要精准控制指针事件的接收范围。

修改后的完整代码 #

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 StatefulWidget {
  const OverlayWidget({Key? key}) : super(key: key);

  @override
  State<OverlayWidget> createState() => _OverlayWidgetState();
}

class _OverlayWidgetState extends State<OverlayWidget> {
  // 控制圆形组件的位置
  Offset _position = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      // 空白区域允许点击穿透
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {},
        child: Stack(
          children: [
            // 可拖拽的圆形组件
            Positioned(
              left: _position.dx,
              top: _position.dy,
              child: Draggable(
                feedback: Material(
                  color: Colors.transparent,
                  child: Container(
                    width: 300,
                    height: 300,
                    decoration: BoxDecoration(
                      color: Colors.red.withOpacity(0.3),
                      border: Border.all(color: Colors.red, width: 2.0),
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
                onDragEnd: (details) {
                  setState(() {
                    _position = details.offset;
                  });
                },
                child: Container(
                  width: 300,
                  height: 300,
                  decoration: BoxDecoration(
                    color: Colors.red.withOpacity(0.3),
                    border: Border.all(color: Colors.red, width: 2.0),
                    shape: BoxShape.circle,
                  ),
                  child: const Center(
                    child: Text(
                      '•',
                      style: TextStyle(
                        fontSize: 40,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 移除全局IgnorePointer：不再用全局忽略指针的组件包裹整个Overlay，避免拖拽事件被屏蔽。
• 精准控制点击穿透：通过GestureDetector(behavior: HitTestBehavior.translucent)处理空白区域，让触摸事件可以穿透到下层应用。
• 独立管理拖拽区域：将Draggable绑定到圆形组件上，仅让圆形区域响应拖拽，并通过状态变量维护拖拽后的位置。
• 转为StatefulWidget：因为需要保存拖拽位置状态，将原无状态的OverlayWidget改为有状态组件。

内容的提问来源于stack exchange，提问作者Dipanshu Jangir