I’m using flutter to build a app with cesium. In my case, i want to stack some interactive buttons on top of the webview which embed the cesium(Just like the CSS position layout in Web Technology.).I’ve found a problem on IOS which works well on Android.When tap once the flutter element which on top of the cesium(webview), the cesium camera control became strange. When tap twice, the cesium camera control become unable to work.I had tried another webgl demo(http://madebyevan.com/webgl-water/).It work well.And i had tried another webview plugin, but i got the same result. So I guess it’s a error inside cesium.
Here’s the most simplify flutter main function and the corresponding screenshot:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
//import 'package:flutter_inappwebview/flutter_inappwebview.dart';
void main() {
runApp(MaterialApp(
home: SafeArea(
child: Stack(
children: <Widget>[
WebView(
// work well
// initialUrl: 'http://madebyevan.com/webgl-water/',
// the most simplify cesium example that can reproduce the problem
initialUrl: 'https://sandcastle.cesium.com/standalone.html#c=bY9Pa8MwDMW/ivGpgyGz6+qGQq+FHQY7+aI6Wmuq2MFSUtJPvyS9jK26vaf3058RqxkT3aiancl0MweSNHTwtXqbYOOqDyUrpkw12JdtyPbVetGJqQnZrLVPXV+qmqHyBsApdT2jkrjTEK+kEEUWcIl69xv1bRpNandPNpnIKDJ3vgfmz3SnYBvv5vw/lAu2KZ8/RqqM0xK7vDXHhwkA3s3yOaml8Anrn8nzfxfVXt6dE8xtRFEmeBwIsXTujMxUJ/cD',
javascriptMode: JavascriptMode.unrestricted,
),
// the fake interactive button on top of cesium(tap here)
Positioned(
top: 100,
width: 200,
child: Container(
height: 50,
color: Colors.red,
),
),
],
),
),
));
}
So when you tap on this HTML element you create (that red rectangle in the top left?) you can no longer move the camera by tapping/dragging on the globe? My best guess is that the HTML element perhaps takes away the WebView’s focus from the canvas? Can you try seeing if triggering the following code fixes it viewer.scene.canvas.focus(); (as described here: Cesium captures mouse click events · Issue #4126 · CesiumGS/cesium · GitHub).
Does clicking on the home button in the top fix it?
So when you tap on this HTML element you create (that red rectangle in the top left?)
Yes, but it is not an HTML element, it’s an flutter element.
you can no longer move the camera by tapping/dragging on the globe?
Yes.
I had tried your suggestion, but the issue still exists.
I guess it is not a 'focus’issue. It’s more like an ‘touch position’ issue.
It seems that the touch position has been stored After each tap on the red rectangle.
So when after i tap the red rectangle once (one touch position stored), then i touch move on the globe (the canvas element) with one fingure. The ‘ScreenSpaceEventType.PINCH_MOVE’ event will be triggered.
When after i tap the red rectangle again (two touch position stored), then i can no longer control the camera.
In my case, i create (and maintain it’s position and size) transparent html div element dynamically, insert it between Flutter widget and Cesium Container html element to .
