Flutter深色模式下WebView加载初期显示白色背景如何解决？

以下是可直接落地的修复方法：

• 优先设置WebView原生背景色
  你使用的webview_flutter库本身提供了直接修改原生WebView背景的参数，初始化时直接根据当前深色模式状态传入对应背景色即可，该配置原生层直接生效，不需要等待页面加载完成，能直接消除初始白屏：

  WebView(
    backgroundColor: isDarkMode ? Colors.black : Colors.white,
    // 其余配置
  )
  

• 预加载带深色样式的空占位页
  如果需要更完整的初始深色适配，可在加载目标页之前先加载一段内置深色样式的空HTML，再跳转目标地址，避免中间过渡阶段出现白屏：

  late final WebViewController _webController;
  
  @override
  void initState() {
    super.initState();
    _webController = WebViewController();
    _loadTargetPage();
  }
  
  Future<void> _loadTargetPage() async {
    if (isDarkMode) {
      // 先加载深色模式空占位页
      await _webController.loadHtmlString('''
        <html>
          <head>
            <meta name="color-scheme" content="dark">
            <style>
              body { background: #121212; margin: 0; padding: 0; }
            </style>
          </head>
          <body></body>
        </html>
      ''');
    }
    // 再加载目标页面
    await _webController.loadRequest(Uri.parse('你的目标页面地址'));
  }
  

• 原生层强制开启深色模式适配
  针对双端分别做原生配置，让WebView从初始化阶段就默认适配深色模式：
  • Android端：深色模式开启时，原生层调用webView.getSettings().setForceDark(WebSettings.FORCE_DARK_ON)，系统会自动强制WebView内容适配深色，初始阶段就生效
  • iOS端：初始化WKWebView时，设置webView.backgroundColor = [UIColor systemBackgroundColor]，同时配置configuration.defaultWebpagePreferences.preferredContentMode = WKContentModeDark
• 可控H5页面添加适配标识
  如果你能修改WebView加载的H5页面代码，直接在页面<head>中添加<meta name="color-scheme" content="light dark">标识，WebView识别到该标识后会在加载初始阶段就自动匹配当前系统模式的背景色，无需等样式加载完成。

注意：不要把深色模式样式的注入逻辑放在onPageFinished回调中，这是导致加载完成才切换深色样式的核心原因，样式注入可提前到onPageStarted阶段执行。

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