首页 > 解决方案 > 颤振谷歌地图重绘边界。toImage() 在 Web 上崩溃

问题描述

重现步骤:

  1. 在 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包。结果相同

如果您对上述错误的含义有任何线索,我将不胜感激,即使是一个小评论。它将帮助我找到解决方法

标签: fluttergoogle-mapsdart

解决方案


推荐阅读