Write the title here

[xdanaskos]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When I have a Draggable Positioned element over the webview and move it up and down, it scrolls the site.

This is happening only on iOS version 8.x.x and if I am correct only on real devices. On prior versions I have checked it does not do that.

I have tried AbsorbPointer widget or IgnorePointer as well as external package (PointerInterceptor) with no luck.

The url loaded on the InAppWebView is a free template and I have not created it.

Expected Behavior

The expected behavior is to drag the Widget positioned on top of WebView and the events should not propagate to the WebView as it did on the earlier versions of iOS.

Steps with code example to reproduce

Just run this app and drag the round widget with the text over the WebView

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  InAppWebViewController? inAppWebViewController;
  double bubbleX = 0.0;
  double bubbleY = 0.0;
  double _progress = 0;
  @override
  void initState() {
    super.initState();
    _loadUrl();
  }

  void looseFocus() async {
    await inAppWebViewController!.getUrl().then((url) {});
  }

  void _loadUrl() {
    if (inAppWebViewController != null) {
      inAppWebViewController!.loadUrl(
          urlRequest: URLRequest(
              url: WebUri(
                  'https://www.figma.com/proto/yHgG2gGFL2tGJVx0BiVAhG/Open-Fashion---Free-eCommerce-UI-Kit--Community-?node-id=418-616&t=Pl9fuRlibyEgIApF-1')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
          children: [
            Column(
              children: [
                _progress < 1
                    ? LinearProgressIndicator(
                        value: _progress,
                      )
                    : const SizedBox(),
                Expanded(
                  child: Stack(
                    children: [
                      InAppWebView(
                        onWebViewCreated: (InAppWebViewController controller) {
                          inAppWebViewController = controller;
                          inAppWebViewController!.addJavaScriptHandler(
                            handlerName: 'handleTap',
                            callback: (args) {
                              looseFocus();
                            },
                          );
                          _loadUrl();
                        },
                        onProgressChanged:
                            (InAppWebViewController controller, int progress) {
                          if (mounted) {
                            setState(() {
                              _progress = progress / 100;
                            });
                          }
                        },
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                Positioned(
                  left: bubbleX,
                  bottom: bubbleY,
                  child: Draggable(
                    feedback: Container(
                      width: 90,
                      height: 90,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(50),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withValues(alpha: 0.15),
                            spreadRadius: 0,
                            blurRadius: 12,
                            offset: const Offset(
                                0, 5), // changes position of shadow
                          ),
                        ],
                      ),
                      child: Center(
                        child: Padding(
                          padding:
                              const EdgeInsets.fromLTRB(1.0, 0.0, 1.0, 0.0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              const Text(
                                "A TEXT",
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 12.0,
                                  fontWeight: FontWeight.bold,
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                    childWhenDragging: Container(
                      width: 80,
                      height: 80,
                      decoration: const BoxDecoration(
                        color: Colors.transparent,
                        shape: BoxShape.circle,
                      ),
                    ),
                    onDragUpdate: (details) {
                      setState(() {
                        bubbleX += details.delta.dx;
                        bubbleY -= details.delta.dy;
                      });
                    },
                    child: GestureDetector(
                      onTap: () {},
                      child: Container(
                        width: 80,
                        height: 80,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(50),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withValues(alpha: 0.15),
                              spreadRadius: 0,
                              blurRadius: 12,
                              offset: const Offset(
                                  0, 5), // changes position of shadow
                            ),
                          ],
                        ),
                        child: Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [const Text("A TEXT")],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Stacktrace/Logs

There is no stacktrace.

Flutter version

v3.27.1

Operating System, Device-specific and/or Tool

iOS version 8.x.x

Plugin version

v6.1.5, v6.2.0-beta2

Additional information

No response

Self grab

• I'm ready to work on this issue!