Flutter Web在Safari及移动设备显示空白白屏问题求助

问题定位 #

从你提供的Safari控制台错误来看，核心问题是**window.flutter_inappwebview对象为空**，调用callHandler时触发TypeError——这大概率是flutter_inappwebview插件在Web端的初始化逻辑不兼容Safari/移动端浏览器，尤其是主页面可能提前调用了插件相关方法，但插件还未完成初始化。

针对性解决方案 #

• 调整插件调用时机
  检查主页面代码中是否在initState或页面构建初期就调用了flutter_inappwebview的callHandler等方法。Safari和移动端浏览器的JS引擎初始化速度慢于桌面Chrome，建议将插件相关逻辑延迟到页面完全渲染后执行：

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 这里执行flutter_inappwebview的callHandler等操作
    });
  }
  

• 添加Web端初始化校验
  在调用插件方法前，先判断Web端的window.flutter_inappwebview是否存在，避免空指针错误：

  import 'dart:js' as js;
  
  // 调用前先做校验
  if (js.context.hasProperty('flutter_inappwebview')) {
    js.context['flutter_inappwebview'].callMethod('callHandler', ['yourHandlerName']);
  }
  

• 替换或条件禁用Web端插件
  如果Web端不需要flutter_inappwebview功能，可通过条件编译禁用Web端的插件引用：

  import 'package:flutter/foundation.dart';
  import 'package:flutter_inappwebview/flutter_inappwebview.dart'
      if (kIsWeb) 'package:flutter_inappwebview/web/web.dart';
  

  或者改用对Safari兼容性更好的webview_flutter插件。

• 优化构建参数与页面配置
  尝试添加构建参数优化Safari兼容性：

  flutter build web --release --web-renderer html --dart-define=FLUTTER_WEB_USE_SKIA=false
  

  同时确保index.html中添加Safari兼容meta标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  

额外排查步骤 #

• 检查主页面是否存在大量同步渲染的复杂组件，尝试拆分为懒加载形式。
• 清空Safari浏览器缓存与网站数据，排除缓存导致的初始化异常。

内容的提问来源于stack exchange，提问作者Luca J.