Flutter跨平台开发：如何仅在Web端使用dart:js方法并兼容移动端构建

为啥会编译失败？ #

直接导入dart:js包会导致移动端编译报错，因为这个包是Web平台独有的，移动端环境里根本找不到相关依赖。哪怕你加了平台判断逻辑，编译器在静态分析阶段还是会检测到这个导入，直接卡壳。

靠谱解决方案：条件导入（最推荐） #

用Dart的条件导入功能，把Web和移动端的返回逻辑拆成不同文件，只在对应平台加载对应的实现。

1. 新建三个文件：

   • back_web.dart（Web端逻辑）

     import 'dart:js' as js;
     
     void goBack() {
       js.context.callMethod('back');
     }
     

   • back_mobile.dart（移动端逻辑）

     import 'package:flutter/material.dart';
     
     void goBack(BuildContext context) {
       Navigator.pop(context);
     }
     

   • back.dart（统一调用入口）

     // 移动端加载mobile实现，Web加载web实现
     import 'back_mobile.dart' if (dart.library.js) 'back_web.dart';
     

2. 在业务代码里直接调用统一方法：
   修改SecondPage的返回按钮逻辑：

   floatingActionButton: FloatingActionButton(
     onPressed: () {
       goBack(context);
     },
     child: const Icon(Icons.add),
   ),
   

   （如果Web端的goBack不需要context，你可以调整参数，或者在Web的实现里忽略context就行）

简单场景备选：动态导入+平台判断 #

如果不想拆文件，也可以用动态导入的方式，只在Web环境下加载dart:js：

import 'package:flutter/material.dart';
import 'dart:io' show Platform;

// ... 其他代码不变

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ... 其他代码不变
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          if (Platform.isAndroid || Platform.isIOS) {
            Navigator.pop(context);
          } else if (Platform.isWeb) {
            // 只在Web环境下动态导入dart:js
            final js = await import('dart:js');
            js.context.callMethod('back');
          }
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

注意：Platform.isWeb是Flutter 2.0之后才支持的，而且动态导入会有一点点性能损耗，适合简单场景用。

总结 #

最推荐用条件导入的方式，编译阶段就把平台代码隔离开，既不会报错，代码结构也清晰，后期维护起来也方便。

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