多平台编译时Flutter库导入问题（Flutter 3.19）

针对你遇到的Web专属库导致移动端编译失败、旧条件导入语法失效的问题，可通过以下几种方式解决：

方法1：修正条件导入语法并隔离平台代码 #

简化原有的条件导入写法，确保移动端不会编译Web专属代码：

1. 创建一个统一的转发文件（比如video_player_handler.dart）：

// video_player_handler.dart
export 'handler_mobile.dart'
    if (dart.library.html) 'handler_web.dart';

2. 拆分平台专属代码：
   • handler_mobile.dart：只包含Android/iOS相关的播放器逻辑，绝对不能导入dart:html、dart:web_ui等Web库
   • handler_web.dart：仅存放Web端代码，可安全导入Web专属库，实现对应的播放器逻辑
3. 确保所有平台共享的接口（比如VideoPlayerHandler抽象类）放在单独的文件（如video_player_interface.dart）中，所有平台都只导入这个接口文件，避免平台代码交叉。

方法2：结合运行时判断与延迟导入 #

如果条件导入依然存在编译问题，可使用延迟导入配合kIsWeb运行时判断，彻底隔离平台代码：

import 'package:flutter/foundation.dart';

// 定义共享接口
abstract class VideoPlayerHandler {
  void play();
  void pause();
}

late final VideoPlayerHandler playerHandler;

Future<void> initPlayerHandler() async {
  if (kIsWeb) {
    // 仅在Web端加载Web专属代码
    final webModule = await import('handler_web.dart');
    playerHandler = webModule.WebVideoPlayerHandler();
  } else {
    // 移动端加载移动端代码
    final mobileModule = await import('handler_mobile.dart');
    playerHandler = mobileModule.MobileVideoPlayerHandler();
  }
}

这种方式下，移动端编译时不会解析handler_web.dart中的Web专属代码，从根源避免编译错误。

方法3：利用Flutter平台自动导入规则 #

Flutter支持根据平台自动匹配文件名，你可以：

• 创建handler.dart（通用入口）
• 创建handler_web.dart（Web端实现）
• 创建handler_mobile.dart（移动端实现）

然后在需要使用的地方直接导入handler.dart，Flutter会根据当前编译平台自动加载对应的实现文件。

核心注意事项 #

• 所有Web专属的库导入（如dart:web_ui、dart:html）必须仅存在于Web端的代码文件中，移动端文件绝对不能包含这些导入。
• 检查项目中是否有其他文件意外导入了Web专属库，这是导致移动端编译失败的常见原因。

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