Flutter跨端项目导入dart:js、dart:html移动端编译报错如何解决

你之前的条件导入失效是未严格遵循Dart条件导入语法规则，没有在导出层完全隔离平台依赖，导致移动端编译时仍然扫描到了Web端文件内的dart:html、dart:js引用。

1. 编写存根文件 player_stub.dart #

存根仅定义抽象接口，不包含任何平台相关实现：

import 'package:flutter/widgets.dart';

// 定义统一的播放器获取方法
Widget getPlayer();

2. 编写移动端实现 mobile_player.dart #

仅引入移动端可用依赖，实现存根定义的接口：

import 'package:flutter/widgets.dart';
import 'player_stub.dart';

Widget getPlayer() {
  // 返回你开发的移动端标准Flutter Unity播放器组件
  return const MobileUnityPlayer();
}

class MobileUnityPlayer extends StatelessWidget {
  const MobileUnityPlayer({super.key});
  
  @override
  Widget build(BuildContext context) {
    // 移动端组件逻辑实现
  }
}

3. 编写Web端实现 web_player.dart #

可正常引入dart:html、dart:js，实现存根定义的接口：

import 'package:flutter/widgets.dart';
import 'dart:html';
import 'dart:js';
import 'player_stub.dart';

Widget getPlayer() {
  // 返回你开发的Web端基于HTML/JS实现的Unity播放器组件
  return const WebUnityPlayer();
}

class WebUnityPlayer extends StatelessWidget {
  const WebUnityPlayer({super.key});
  
  @override
  Widget build(BuildContext context) {
    // Web端组件逻辑实现，可正常调用dart:html、dart:js的API
  }
}

4. 编写统一导出入口 player.dart #

核心条件导入逻辑写在这个文件，禁止在其他任何文件直接导入web_player.dart或mobile_player.dart：

export 'player_stub.dart' show getPlayer;

// 条件导入语法：默认加载移动端实现，检测到dart:html可用时加载Web端实现
import 'player_stub.dart';
import 'mobile_player.dart' if (dart.library.html) 'web_player.dart';

5. 业务层调用 #

直接导入统一入口文件调用接口即可，无需额外判断平台：

import 'player.dart';

class UnityDisplayPage extends StatelessWidget {
  const UnityDisplayPage({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: getPlayer(),
    );
  }
}

• 条件导入的判断条件仅支持dart.library.xxx格式的Dart内置编译时常量，不能使用kIsWeb或其他自定义变量
• 仅允许在web_player.dart中导入dart:html、dart:js，其他文件禁止引入这两个包，即使是未执行的代码分支中的导入也会触发编译报错
• Flutter 2.5.2版本完全支持上述语法，无需额外修改pubspec配置

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