Flutter Web使用webview_flutter加载动态URL时偶发UnimplementedError

问题背景 #

使用webview_flutter: ^4.0.1在Flutter Web加载动态URL时，偶发抛出UnimplementedError，部分场景可正常运行，错误栈如下：

Error: UnimplementedError
    at Object.throw_ [as throw] (http://localhost:40977/dart_sdk.js:5080:11)
    at webview_flutter_web.WebWebViewPlatformController.new.updateSettings (http://localhost:40977/packages/webview_flutter_web/webview_flutter_web.dart.lib.js:171:17)
    at [_updateSettings] (http://localhost:40977/packages/webview_flutter/src/webview.dart.lib.js:696:48)
    at webview.WebViewController.__._updateWidget (http://localhost:40977/packages/webview_flutter/src/webview.dart.lib.js:689:36)
    at _updateWidget.next (<anonymous>)
    at runBody (http://localhost:40977/dart_sdk.js:40660:34)
    at Object._async [as async] (http://localhost:40977/dart_sdk.js:40691:7)
    at [_updateWidget] (http://localhost:40977/packages/webview_flutter/src/webview.dart.lib.js:687:20)
    at http://localhost:40977/packages/webview_flutter/src/webview.dart.lib.js:498:34
    at _RootZone.runUnary (http://localhost:40977/dart_sdk.js:40511:59)
    at _FutureListener.then.handleValue (http://localhost:40977/dart_sdk.js:35438:29)
    at handleValueCallback (http://localhost:40977/dart_sdk.js:35999:49)
    at _Future._propagateToListeners (http://localhost:40977/dart_sdk.js:36037:17)
    at async._AsyncCallbackEntry.new.callback (http://localhost:40977/dart_sdk.js:35753:27)
    at Object._microtaskLoop (http://localhost:40977/dart_sdk.js:40778:13)
    at _startMicrotaskLoop (http://localhost:40977/dart_sdk.js:40784:13)
    at http://localhost:40977/dart_sdk.js:36261:9

当前WebView实现代码：

WebViewController? wcontroller;
WebView(
  javascriptMode: JavascriptMode.unrestricted,
  onProgress: (pr) {
    Center(
      child: CircularProgressIndicator(),
    );
  },
  zoomEnabled: true,
  initialUrl: ''.toString(),
  onWebViewCreated: (WebViewController webViewController) async {
    wcontroller = webViewController;
    await wcontroller?.loadUrl(controller.getEventsListResponse2.value.data!.rows![controller.selectedIndex.value].eventUrl.toString());
  },
)

原因分析 #

1. webview_flutter_web版本缺陷：4.0.1版本的webview_flutter_web实现中，updateSettings方法存在未实现的逻辑分支，当WebView的配置（如zoomEnabled）触发更新时，会直接抛出UnimplementedError。
2. 异步操作冲突：代码中在onWebViewCreated里异步调用loadUrl，同时初始化时设置了zoomEnabled: true，两者触发的配置更新和URL加载操作存在时序冲突，偶发触发未实现的代码路径。

解决方法 #

1. 升级依赖版本 #

后续版本的webview_flutter_web修复了该未实现的方法，建议将依赖升级到最新稳定版，修改pubspec.yaml：

webview_flutter: ^4.4.0

2. 调整代码避免操作冲突 #

取消onWebViewCreated中的loadUrl调用，直接通过initialUrl传入动态URL，避免双重触发配置更新：

WebViewController? wcontroller;
// 提前获取动态URL
final dynamicUrl = controller.getEventsListResponse2.value.data!.rows![controller.selectedIndex.value].eventUrl.toString();

WebView(
  javascriptMode: JavascriptMode.unrestricted,
  onProgress: (progress) {
    // 此处需通过状态管理更新UI，直接返回Widget无效
    // 示例：if mounted，调用setState更新进度显示
  },
  zoomEnabled: true, // 升级依赖后可正常使用
  initialUrl: dynamicUrl,
  onWebViewCreated: (WebViewController webViewController) {
    wcontroller = webViewController;
  },
)

3. 替换为更完善的Web端WebView插件 #

如果升级后仍有问题，可使用flutter_inappwebview，它对Web端的API支持更全面，能避免此类未实现方法的问题。

内容的提问来源于stack exchange，提问作者Developer