时间戳

首页 > 解决方案 > 导入 js.dart 和 html.dart 用于混合 Web/移动端 Flutter 项目

flutter - 导入 js.dart 和 html.dart 用于混合 Web/移动端 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")
  }
}

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

Error: Not found: 'dart:js'

和

Error: Not found: 'dart:html'

我知道移动平台中不存在这些包，我正在尝试寻找解决方法。我最初尝试根据标志有条件地使用WebPlayeror小部件，但这没有任何区别（我猜是因为 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();

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

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

标签： flutterflutter-webflutter-htmlflutter-js

解决方案

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

推荐阅读