flutter - 颤振谷歌地图重绘边界。toImage() 在 Web 上崩溃
问题描述
重现步骤:
- 在 Flutter Web 上,将 Flutter Google Maps 包裹在 RepaintBoundary 中
像这样:
@override
Widget build(BuildContext context) {
return RepaintBoundary(
key: ScreenShotable.previewContainer,
child: widget.child,
);
}
用法:
final img = await screenshotController.captureAsUiImage(
Container(
height: 100,
width: 100,
color: Colors.brown,
child: GoogleMap(
initialCameraPosition: CameraPosition(
target: FlitLatLng(-20.1020344, 57.5621812999999).toLatLng(),
zoom: 13.0,
),
rotateGesturesEnabled: false,
tiltGesturesEnabled: false,
// markers: Set<Marker>.of(controller.markers.values),
),
),
delay: Duration(seconds: 6));
ScreenshotControllers.captureAsUiImage
RenderRepaintBoundary boundary =
this.view!.context.findRenderObject() as RenderRepaintBoundary;
ui.Image image = await boundary.toImage(pixelRatio: pxRatio); // crash here
实际的:
Error: Unexpected null value.
at Object.throw_ [as throw] (http://localhost:49196/dart_sdk.js:5037:11)
at Object.nullCheck (http://localhost:49196/dart_sdk.js:5362:30)
at _engine.PlatformViewLayer.new.preroll (http://localhost:49196/dart_sdk.js:135222:12)
at _engine.OffsetEngineLayer.new.prerollChildren (http://localhost:49196/dart_sdk.js:134614:15)
at _engine.OffsetEngineLayer.new.preroll (http://localhost:49196/dart_sdk.js:134881:35)
at _engine.OffsetEngineLayer.new.prerollChildren (http://localhost:49196/dart_sdk.js:134614:15)
at _engine.OffsetEngineLayer.new.preroll (http://localhost:49196/dart_sdk.js:134881:35)
at _engine.TransformEngineLayer.new.prerollChildren (http://localhost:49196/dart_sdk.js:134614:15)
at _engine.TransformEngineLayer.new.preroll (http://localhost:49196/dart_sdk.js:134881:35)
at _engine.RootLayer.new.prerollChildren (http://localhost:49196/dart_sdk.js:134614:15)
at _engine.RootLayer.new.preroll (http://localhost:49196/dart_sdk.js:134609:31)
at _engine.LayerTree.new.flatten (http://localhost:49196/dart_sdk.js:135508:22)
at _engine.LayerScene.new.toImage (http://localhost:49196/dart_sdk.js:135263:36)
at layer$.OffsetLayer.new.toImage (http://localhost:49196/packages/flutter/src/rendering/layer.dart.js:1327:30)
at toImage.next (<anonymous>)
at runBody (http://localhost:49196/dart_sdk.js:37393:34)
at Object._async [as async] (http://localhost:49196/dart_sdk.js:37424:7)
at layer$.OffsetLayer.new.toImage (http://localhost:49196/packages/flutter/src/rendering/layer.dart.js:1318:20)
at proxy_box.RenderRepaintBoundary.new.toImage (http://localhost:49196/packages/flutter/src/rendering/proxy_box.dart.js:3096:26)
at captureFromWidget (http://localhost:49196/packages/screenshot/screenshot.dart.js:242:44)
at captureFromWidget.next (<anonymous>)
at http://localhost:49196/dart_sdk.js:37374:33
at _RootZone.runUnary (http://localhost:49196/dart_sdk.js:37245:59)
at _FutureListener.thenAwait.handleValue (http://localhost:49196/dart_sdk.js:32501:29)
at handleValueCallback (http://localhost:49196/dart_sdk.js:33028:49)
at Function._propagateToListeners (http://localhost:49196/dart_sdk.js:33066:17)
at _Future.new.[_complete] (http://localhost:49196/dart_sdk.js:32906:25)
at http://localhost:49196/dart_sdk.js:32085:30
at internalCallback (http://localhost:49196/dart_sdk.js:24224:11)
预期的:
没有崩溃。如果我们得到地图的截图就更好了。在移动设备上,我们得到空白屏幕。
进一步调试:
我尝试使用上面自己的代码,甚至使用https://pub.dev/packages/screenshot包。结果相同
如果您对上述错误的含义有任何线索,我将不胜感激,即使是一个小评论。它将帮助我找到解决方法
解决方案
推荐阅读
- image-processing - 构建编码-解码图像的分层模型
- java - JAVA创建的JSP页面出现乱码
- r - 使用 gganimate 构建堆叠直方图
- python - Python append 函数没有按预期工作
- javascript - 从 Materialize 多个下拉列表中取消选择除第一个之外的所有元素
- mysql - 用于获取表中多个不同项目的最新记录的 MySQL 查询
- node.js - 我如何从 child_process.execFile 获得结果?
- python - 如何在python的html文件中写入json数据
- html - 故意使两个 flex 容器在相同的特定位置重叠
- laravel-5 - 调用未定义的方法 Grimzy\LaravelMysqlSpatial\Eloquent\SpatialExpression::getLat()