为何Flutter Web应用无法在模拟器或Android Studio中运行？

你的核心问题是**dart:html、dart:js是Web平台专属API，Android/iOS模拟器属于移动端环境，不支持这些Web特有的库**，直接导入会导致编译失败；同时File类在Web和移动端分属不同库（Web是dart:html的File，移动端是dart:io的File），混用也会引发错误，最终导致Gradle编译任务失败。而Chrome浏览器是Web环境，所以运行正常。

一、修复代码跨平台兼容性（核心方案） #

必须让Web专属代码只在Web环境生效，移动端加载兼容的替代实现，推荐两种方式：

1. 拆分平台代码+条件导入 #

把平台相关逻辑拆分到不同文件，通过条件导入自动适配：

• 创建通用接口文件file_picker.dart：

  abstract class FilePickerService {
    Future<void> pickVideo();
  }
  

• 创建Web端实现file_picker_web.dart：

  import 'dart:html';
  import 'dart:js' as js;
  import 'file_picker.dart';
  
  class WebFilePicker implements FilePickerService {
    late File selectedFile;
  
    @override
    Future<void> pickVideo() async {
      final input = FileUploadInputElement()..accept = 'video/*';
      input.click();
      await input.onChange.first;
      selectedFile = input.files!.first;
      // 这里写Web端视频处理逻辑
    }
  }
  

• 创建移动端实现file_picker_mobile.dart：

  import 'dart:io';
  import 'package:image_picker/image_picker.dart';
  import 'file_picker.dart';
  
  class MobileFilePicker implements FilePickerService {
    late File selectedFile;
  
    @override
    Future<void> pickVideo() async {
      final picker = ImagePicker();
      final pickedFile = await picker.pickVideo(source: ImageSource.gallery);
      if (pickedFile != null) {
        selectedFile = File(pickedFile.path);
      }
      // 这里写移动端视频处理逻辑
    }
  }
  

• 在主业务文件中条件导入：

  import 'file_picker.dart';
  import 'file_picker_mobile.dart' if (dart.library.html) 'file_picker_web.dart';
  
  // 使用示例
  final filePicker = MobileFilePicker() as FilePickerService;
  

2. 用条件编译包裹Web代码 #

如果不想拆分文件，直接用kIsWeb判断（需导入package:flutter/foundation.dart），确保Web专属代码只在Web环境执行：

import 'package:flutter/foundation.dart';

void handleVideoPick() {
  if (kIsWeb) {
    // 仅Web环境执行的代码
    import 'dart:html';
    import 'dart:js' as js;
    final input = FileUploadInputElement()..accept = 'video/*';
    input.click();
    // ...其他Web逻辑
  } else {
    // 移动端逻辑，使用dart:io或第三方插件
    final picker = ImagePicker();
    final video = await picker.pickVideo(source: ImageSource.camera);
    // ...其他移动端逻辑
  }
}

注意：dart:html这类Web库不能在移动端代码路径中直接导入，必须放在kIsWeb的条件块内，否则编译阶段就会报错。

二、解决Gradle编译失败问题 #

代码修复后，Gradle错误通常会自动消失，如果仍有问题：

• 清理项目缓存：执行flutter clean，再运行flutter pub get
• 检查Android SDK版本：确保android/build.gradle中的compileSdkVersion、targetSdkVersion与本地安装的SDK版本一致
• 升级Flutter：执行flutter upgrade切换到稳定版

三、模拟器测试视频通话的替代方案 #

如果暂时不想修改代码，可通过以下方式在模拟器中测试：

1. Chrome远程调试到模拟器 #

• 在Chrome中正常运行Flutter Web应用
• 打开Chrome的chrome://inspect页面，连接到模拟器中的Chrome浏览器
• 将Web应用远程调试到模拟器Chrome中，即可在模拟器界面测试视频通话功能

2. 用WebView封装Flutter Web应用 #

• 新建普通Flutter移动端项目，集成webview_flutter插件
• 将Flutter Web应用打包后部署到本地服务器（比如执行flutter build web后用python -m http.server 5000启动本地服务）
• 用WebView加载本地服务地址，在模拟器中运行：

  import 'package:webview_flutter/webview_flutter.dart';
  
  class WebViewTestScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return WebView(
        initialUrl: 'http://localhost:5000',
        javascriptMode: JavascriptMode.unrestricted,
      );
    }
  }
  

• 需在android/app/src/main/AndroidManifest.xml中添加权限：

  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.CAMERA"/>
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  

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