flutter - 为混合网络/移动 flutter 项目导入 js.dart 和 html.dart

Question

我正在使用 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 不是编译时间常量？)

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

import 'package:flutter/material.dart';


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

我将这个 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 中添加 stub 实现:

Widget getPlayer() => MobilePlayer();

在我的 web_player.dart 中:

Widget getPlayer() => WebPlayer();

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

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

Answer 1

只是为其他寻求答案的人回答我自己的问题:解决方案是将 stub 、移动小部件和网络小部件移动到单独的 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

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