Flutter跨平台WebView配置报错：WebWebViewPlatform未定义及安卓编译错误

问题根源 #

你的核心问题是移动端（Android/iOS）编译时会加载Web端WebView包的代码，导致Web相关API缺失报错；但不导入Web包又无法在Web平台初始化WebWebViewPlatform。这是因为Flutter默认会将所有依赖的包代码纳入编译，除非通过条件导入或平台隔离来区分。

解决方案 #

按照以下步骤配置，彻底隔离移动端与Web端的WebView代码：

1. 配置pubspec.yaml依赖 #

同时添加移动端和Web端的WebView包，Flutter会自动根据平台筛选依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0  # 移动端WebView核心包
  webview_flutter_web: ^0.2.2+1  # Web端适配包

2. 用条件导入隔离平台代码 #

创建3个文件拆分平台逻辑：

• webview_init.dart（通用入口）
• webview_init_web.dart（Web平台初始化）
• webview_init_mobile.dart（移动端空实现）

webview_init.dart（通用入口）

通过条件导入自动匹配平台：

export 'webview_init_mobile.dart'
    if (dart.library.html) 'webview_init_web.dart';

webview_init_mobile.dart（移动端）

无需任何初始化代码，空文件即可：

// 移动端默认使用原生WebView平台，无需额外配置

webview_init_web.dart（Web平台）

导入Web包并初始化平台：

import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

void initWebViewPlatform() {
  WebView.platform = WebWebViewPlatform();
}

3. 在主程序中初始化 #

导入通用入口文件，通过kIsWeb判断仅在Web平台执行初始化：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'webview_init.dart';

void main() {
  // 仅Web平台执行WebView初始化
  if (kIsWeb) {
    initWebViewPlatform();
  }
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: WebView(
          initialUrl: 'https://flutter.dev',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

替代方案（无需额外文件） #

如果不想创建多个文件，可直接在主文件中用条件导入+空文件占位：

1. 创建empty.dart（空文件）
2. 主文件中条件导入：

import 'package:flutter/foundation.dart';
import 'package:webview_flutter/webview_flutter.dart';

// Web平台导入Web包，移动端导入空文件
import 'package:webview_flutter_web/webview_flutter_web.dart'
    if (dart.library.io) 'empty.dart';

void main() {
  if (kIsWeb) {
    WebView.platform = WebWebViewPlatform();
  }
  runApp(const MyApp());
}

关键注意事项 #

• 不要在移动端代码中直接导入webview_flutter_web，否则会带入Web端API导致编译失败
• kIsWeb是Flutter提供的平台判断常量，比dart.library.html更直观
• 确保两个WebView包的版本兼容，可参考pub.dev上的版本适配说明

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