导入 js.dart 和 html.dart 用于混合 Web/移动端 Flutter 项目答案

【问题标题】：Import js.dart and html.dart for a mixed web / mobile flutter project导入 js.dart 和 html.dart 用于混合 Web/移动端 Flutter 项目
【发布时间】：2021-11-27 19:43:42
【问题描述】：

我正在使用 Flutter 2.5.2。我有一个可用于网络和移动（Android / iOS）的项目。

有一个特定的小部件，在为 web 部署时我需要使用一个版本的小部件，它使用 JS 和 HTML 包。在为移动设备部署时，我需要使用仅使用标准 Flutter 小部件的不同版本。（原因很复杂——我将 Unity 嵌入到 Flutter 中）。

例如，我有这个web_player.dart 网络版：

import 'dart:html' as html;
import 'package:js/js.dart';
import 'package:flutter/material.dart';

@JS('loadPlayer')
external String loadPlayer();

class WebVersion extends StatelessWidget {
  const WebVersion({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the HTML package and return an HtmlElementView
  }
}

还有这个mobile_player.dart 移动版：

class MobileVersion extends StatelessWidget {
  const MobileVersion({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text("Mobile version")
  }
}

为 web 构建很好。问题是，当我为移动设备构建时，构建中断：

Error: Not found: 'dart:js'

和

Error: Not found: 'dart:html'

我知道移动平台中不存在这些包，我正在尝试寻找解决方法。我最初尝试根据kIsWeb 标志有条件地使用WebPlayer 或MobilePlayer 小部件，但这没有任何区别（我猜是因为kIsWeb 不是编译时间常数？）

然后我尝试使用条件导入来解决这个问题。所以，我创建了一个存根player_stub.dart：


import 'package:flutter/material.dart';


Widget getPlayer() => throw UnsupportedError("This is a stub");

我将此存根导入到包装器 Player 小部件中：

import 'package:mypackage/player_stub.dart'
  if (dart.library.io) 'package:mypackage/mobile_player.dart'
  if (dart.library.js) 'package:mypackage/web_player.dart';

class Player extends StatelessWidget {

  const Player ();

  @override
  Widget build(BuildContext context) {
    return getPlayer();
  }
}

然后在我的mobile_player.dart 中添加存根实现：

Widget getPlayer() => MobilePlayer();

在我的web_player.dart:

Widget getPlayer() => WebPlayer();

我希望这可以通过编译时摇树或其他方式解决构建错误，但事实并非如此。

我该如何解决这个问题？我完全被难住了。

【问题讨论】：

标签： flutter flutter-web flutter-html flutter-js

【解决方案1】：

只是为了回答我自己的问题以供其他人寻找答案：解决方案是将存根、移动小部件和网络小部件移动到单独的 dart 库中。

该库在其根 my_player_package.dart 文件中使用这样的条件导出：

export 'src/player_stub.dart'
  if (dart.library.js) 'src/web_player.dart'
  if (dart.library.io) 'src/mobile_player.dart';

所以现在我在 pubspec.yaml 中引用了我的单独库：

dependencies:

  ...

  my_player_package:
    path: ../my_player_package

我现在可以import 'package:my_player_package/my_player_package.dart' 为网络和移动设备构建。

【讨论】：