为混合 Web/移动 Flutter 项目导入 js.dart 和 html.dart

Question

我正在使用颤振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")
  }
}

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

Error: Not found: 'dart:js'

和

Error: Not found: 'dart:html'

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

因此，我尝试使用条件导入来解决这个问题。所以，我创建了一个存根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();

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

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

Answer 1

只是为了为其他寻找答案的人回答我自己的问题：解决方案是将存根、移动小部件和 Web 小部件移动到单独的 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'为网络和移动设备进行构建。