避免在 Flutter Web 插件包之外使用纯 Web 库

Question

我正在构建一个Flutter应用程序，我试图在网络上工作。其中一部分包含一些特定于web的代码:

import 'dart:html' as html;
import 'package:flutter/foundation.dart';

class DownloadViewModel extends ChangeNotifier {
  static const String url = 'https://example.com/api/v1/app/myapp_1.0.0.apk';
  void onAndroidDownloadPressed() {
    html.window.open(url, 'AndroidApp');
  }
}

但是，dart：html 导入会给出以下错误：

避免在 Flutter Web 插件包之外使用纯 Web 库

警告的较长版本如下所示：

避免在非网络插件的飘飘包中使用网页库、飞镖：html、飞镖：js和飞镖：js_util。这些库在 Web 上下文之外不受支持。依赖于它们的功能在Flutter移动版的运行时会失败，并且在Flutter Web中通常不鼓励使用它们。

允许在以下位置访问Web库:

plugin packages that declare web as a supported context

否则，不允许导入dart:html、dart:js和dart:js_util。

这不仅仅是一个警告。这实际上阻止了构建Android或iOS应用程序(即使这种方法不能从非Web Flutter应用程序中访问)。

我想出的唯一解决方案是在我为Android和iOS构建时注释掉导入，然后在我为Web构建时取消注释。有更好的解决方案吗？

Answer 1

由于将Flatter web合并到主Flatter存储库中，当以web、Android和iOS为目标时，不再可能在主频道上的Flatter项目中直接添加web库导入（例如，dart:html或dart:js）。

使用通用 html 包，它为多个平台和 Web 库提供广泛的支持。

>

从项目的根级别，命令

flutter pub add universal_html

  import 'package:universal_html/html.dart' as html

运行某些web文件（例如dart:js）不需要此包。在我的例子中，我只需要删除import'dart:js'import语句。

Answer 2

使用universal_html包。它支持浏览器、Dart VM和Flutter，是dart： html和其他Web相关库的替代。

dependencies:
  universal_html: ^1.2.1

然后不使用< code >将“dart:html”作为html导入；您可以使用以下导入:

import 'package:universal_html/html.dart' as html;

对于那些因其他相关web导入问题（如dart:js）而访问此页面的用户，此插件还支持以下导入：

import 'package:universal_html/driver.dart';
import 'package:universal_html/html.dart';
import 'package:universal_html/indexed_db.dart';
import 'package:universal_html/js.dart';
import 'package:universal_html/js_util.dart';
import 'package:universal_html/prefer_sdk/html.dart';
import 'package:universal_html/prefer_sdk/indexed_db.dart';
import 'package:universal_html/prefer_sdk/js.dart';
import 'package:universal_html/prefer_sdk/js_util.dart';
import 'package:universal_html/prefer_sdk/svg.dart';
import 'package:universal_html/prefer_sdk/web_gl.dart';
import 'package:universal_html/prefer_universal/html.dart';
import 'package:universal_html/prefer_universal/indexed_db.dart';
import 'package:universal_html/prefer_universal/js.dart';
import 'package:universal_html/prefer_universal/js_util.dart';
import 'package:universal_html/prefer_universal/svg.dart';
import 'package:universal_html/prefer_universal/web_gl.dart';
import 'package:universal_html/svg.dart';
import 'package:universal_html/web_gl.dart';