webview response to gesture from the widget above it
#58659
Comments
|
On iOS gesture is propagated to the WebView until you touch the WebView - then it stops. webview_flutter: ^0.3.22+1 flutter doctor -v |
This comment was marked as duplicate.
This comment was marked as duplicate.
|
Reproduced based on #73926 I was able to reproduce the issue! code sampleimport 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('widget.title'),
),
body: Container(
color: Colors.grey,
child: Stack(
children: [
Positioned(
left: 100,
top: 20,
width: 100,
height: 100,
child: GestureDetector(
onTap: (){
print('red click');
},
child: Container(
color: Colors.red,
),
)
),
Positioned(
left: 100,
top: 40,
width: 100,
height: 100,
child: GestureDetector(
onTap: (){
print('blue click');
},
child: Container(
color: Colors.blue,
),
)
),
Positioned(
left: 0,
top: 150,
width: 400,
height: 400,
child:Container(
child: WebView(
onWebViewCreated: (WebViewController webViewController){
},
initialUrl: 'https://devpost.com/software/built-with/fabric-js',
javascriptMode: JavascriptMode.unrestricted,
onPageStarted: (String info){
},
onPageFinished: (String info){
},
onWebResourceError: (error){
},
gestureNavigationEnabled: true,
// javascriptChannels: [_toastJsChannel(viewService.context,state,dispatch)].toSet(),
),
)
),
Positioned(
left: 20,
top: 270,
width: 200,
height: 200,
child: GestureDetector(
onTap: (){
print('yellow click');
},
child: Container(
color: Colors.yellow,
),
),
)
],
),
)
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}flutter doctor -v[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H114 darwin-x64, locale en)
• Flutter version 1.22.5 at /Users/pedromassango/dev/SDKs/flutter_stable
• Framework revision 7891006299 (6 weeks ago), 2020-12-10 11:54:40 -0800
• Engine revision ae90085a84
• Dart version 2.10.4
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/pedromassango/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.1, Build version 12A7403
• CocoaPods version 1.9.3
[!] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin installed
• Dart plugin version 203.6912
[✓] VS Code (version 1.52.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.18.1
[✓] Connected device (1 available)
• iPhone 12 Pro Max (mobile) • ECCF5C4A-8BEC-411D-B23E-85A836C3847E • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-1 (simulator)
! Doctor found issues in 1 category.
Process finished with exit code 0 |
|
Is there any way to resolve this situation? |
|
Hello! Also running into this. Has anyone found a workaround? |
|
Me too, Has anyone found a workaround? |
|
@yiv no true workaround. I ended up just having to push a new route on top of the webview to display the interface I needed. |
|
Reproducible on flutter doctor -vSimulator Screen Recording - iPhone 12 - 2021-08-11 at 10.28.05.mp4.zip code sampleimport 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('widget.title'),
),
body: Container(
color: Colors.grey,
child: Stack(
children: [
Positioned(
left: 100,
top: 20,
width: 100,
height: 100,
child: GestureDetector(
onTap: () {
print('red click');
},
child: Container(
color: Colors.red,
),
)),
Positioned(
left: 100,
top: 40,
width: 100,
height: 100,
child: GestureDetector(
onTap: () {
print('blue click');
},
child: Container(
color: Colors.blue,
),
)),
Positioned(
left: 0,
top: 150,
width: 400,
height: 400,
child: Container(
child: WebView(
onWebViewCreated:
(WebViewController webViewController) {},
initialUrl:
'https://devpost.com/software/built-with/fabric-js',
javascriptMode: JavascriptMode.unrestricted,
onPageStarted: (String info) {},
onPageFinished: (String info) {},
onWebResourceError: (error) {},
gestureNavigationEnabled: true,
// javascriptChannels: [_toastJsChannel(viewService.context,state,dispatch)].toSet(),
),
)),
Positioned(
left: 20,
top: 270,
width: 200,
height: 200,
child: GestureDetector(
onTap: () {
print('yellow click');
},
child: Container(
color: Colors.yellow,
),
),
)
],
),
)
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
|
No, it doesn't |
|
I tried again to use 😘 I use the
Here is a snippet of my code: gromore_feed_view.dart/// 信息流广告组件
class GromoreFeedView extends StatefulWidget {
final Map<String, String> creationParams;
/// 回调
final GromoreFeedCallback callback;
const GromoreFeedView({
Key? key,
required this.creationParams,
required this.callback,
}) : super(key: key);
@override
State<GromoreFeedView> createState() => _GromoreFeedViewState();
}
class _GromoreFeedViewState extends State<GromoreFeedView> {
final UniqueKey _detectorKey = UniqueKey();
MethodChannel? _methodChannel;
@override
void initState() {
VisibilityDetectorController.instance.updateInterval =
const Duration(milliseconds: 100);
super.initState();
}
@override
Widget build(BuildContext context) {
String viewType = FlutterGromoreConstants.feedViewTypeId;
return Platform.isAndroid
// Android PlatformViewLink is hidden
? const SizedBox.shrink()
: VisibilityDetector(
key: _detectorKey,
child: UiKitView(
viewType: viewType,
creationParams: widget.creationParams,
creationParamsCodec: const StandardMessageCodec(),
onPlatformViewCreated: (id) {
final String channelName = "$viewType/$id";
_methodChannel = MethodChannel(channelName);
// 注册事件回调
GromoreMethodChannelHandler<GromoreFeedCallback>.register(
channelName, widget.callback);
},
),
onVisibilityChanged: (VisibilityInfo visibilityInfo) {
if (!mounted) return;
// 被遮盖了
final bool isCovered = visibilityInfo.visibleFraction != 1.0;
final Offset offset = (context.findRenderObject() as RenderBox)
.localToGlobal(Offset.zero);
_methodChannel?.invokeMethod('updateVisibleBounds', {
'isCovered': isCovered,
'x': offset.dx + visibilityInfo.visibleBounds.left,
'y': offset.dy + visibilityInfo.visibleBounds.top,
'width': visibilityInfo.visibleBounds.width,
'height': visibilityInfo.visibleBounds.height,
});
},
);
}
}FlutterGromoreIntercptPenetrateView.swift//
// FlutterGromoreIntercptPenetrateView.swift
// flutter_gromore
//
// Created by Anand on 2022/6/13.
//
/// 用于拦截点击穿透
class FlutterGromoreIntercptPenetrateView: UIView {
/// 存在穿透问题？
var isPermeable: Bool = false
/// 广告是否被覆盖
var isCovered: Bool = false
/// 广告的可见区域
var visibleBounds: CGRect = CGRect.zero
init(frame: CGRect, methodChannel: FlutterMethodChannel) {
super.init(frame: frame)
methodChannel.setMethodCallHandler(handle(_:result:))
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
switch call.method {
case "updateVisibleBounds":
let args: [String: Any] = call.arguments as! [String: Any]
isCovered = args["isCovered"] as! Bool
visibleBounds = CGRect(x: args["x"] as! Double, y: args["y"] as! Double, width: args["width"] as! Double, height: args["height"] as! Double)
result(true)
default:
result(FlutterMethodNotImplemented)
}
}
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
if isPermeable {
// 在窗口的点击位置
let windowPoint: CGPoint = convert(point, to: Utils.getVC().view)
// 被覆盖时 -> 点击位置不在可见区域
if isCovered, !visibleBounds.contains(windowPoint) {
return false
}
}
return true
}
} |
Hello, I had read your blog -- https://anandzhang.com/posts/frontend/22. But I still don't know why the PlatformView penetrate happen in some special case? such as yours, and this issue. I create a demo that a FlutterOverlayView over a PlatformView, it works well. |
|
遇到同样的问题 |
|
Hi there I used PlatformView to render Native Ad which was implemented using Google Mobile Ad SDK. When I tap on the widget above the ad, it's also received the touch gesture . This happens on iOS, Android doesn't seem to have this problem. Similar issue also happen in googleads-mobile-flutter package: googleads/googleads-mobile-flutter#390 If anyone knows or has the solution to this issue, please kindly help 🙇♂️ flutter doctor -v |
|
I'm also having this issue. I tried putting a ModalBarrier above my WebViewWidget and some js events still triggered. Links were not clickable. |
This comment was marked as off-topic.
This comment was marked as off-topic.
1 similar comment
This comment was marked as off-topic.
This comment was marked as off-topic.
|
Using pointer interceptor worked for me. |
This comment was marked as duplicate.
This comment was marked as duplicate.
|
I spent couple of days to solve this problem. I wrote code like this Stack(children: [ This works fine so far. |
|
@kcisoul this is really wonderful! |
|
We ran into this issue too on both iOS and Android, even though it was mentioned in this thread more than once that the issue does not occur on Android. Our main use case for this issue is Chromebooks (running the Android build) where a hardware mouse is always present. When something (e.g. a modal) is drawn on top of a webview, the webview still captures pointer events (e.g. clicks). Inspired by the comment from @kcisoul we created a fork of pointer_interceptor which contains a work-around for both iOS and Android. The package itself already has support for Web. |
遇到同样的问题。使用你的方案，解决了。感谢。 |
|
@darshankawar |
EDIT: |
|
I put a ModalBottomSheetRoute overlay on top of a WebView, and PointerInterceptor effectively resolved my issue |
Uh oh!
There was an error while loading. Please reload this page.
webView_flutter for iOS ，When loading the map URL, stack will overlay a gesturedetector event, which will penetrate the map page。。Loading other https web will not appear
The text was updated successfully, but these errors were encountered: