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

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 导入会出现以下错误：

Avoid using web-only libraries outside Flutter web plugin packages

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

Avoid using web libraries, dart:html, dart:js and dart:js_util in Flutter packages that are not web plugins. These libraries are not supported outside a web context; functionality that depends on them will fail at runtime in Flutter mobile, and their use is generally discouraged in Flutter web.

Web library access is allowed in:
plugin packages that declare web as a supported context
otherwise, imports of dart:html, dart:js and dart:js_util are disallowed.

而且这不仅仅是一个警告。这实际上阻止了构建 Android 或 iOS 应用程序（即使非 Web Flutter 应用程序无法访问此方法）。

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

Answer 1

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

dependencies:
  universal_html: ^1.2.1

然后您可以使用以下导入而不是使用 import 'dart:html' as 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';

Answer 2

自从 Flutter-web 合并到 Flutter 主存储库后，不再可能在 Flutter 项目中直接添加 Web 库（例如 dart:html 或 dart:js）的导入在主频道上定位 Web 时，Android 和 iOS.

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

从项目的根级别，命令
```
flutter pub add universal_html
```

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

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

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

Avoid using web-only libraries outside Flutter web plugin packages

html

dart

flutter

flutter-web