如果您的项目有 dart html 导入，如何在模拟器上运行 flutter

Question

我正在将 flutter 用于移动和网络应用程序。我需要从移动应用程序和网络浏览器上传照片。移动应用程序没有问题，一切正常，对于网络版本，发明了以下解决方案：我为网络应用程序创建了一种方法，以便可以从桌面上传照片。为此，我使用了import \'dart:html\';，但如果我尝试在网络浏览器中运行一切正常，但如果我现在在移动应用程序上运行它，我会收到一堆错误，指出无法编译网络导入（html）。

\n

我读到了以下问题，其中说您只需\xe2\x80\x99t 在移动应用程序中调用 HTML 方法。如果应用程序不在 Web 浏览器中运行，我禁止调用 HTML 方法，但结果相同：

\n

import \'dart:html\';

\n

Future<void> _listenImagesFromWeb() async {\n    if (!kIsWeb)\n      return;\n    final String profileId = (await FirebaseAuth.instance.currentUser()).uid;\n\n    final completer = Completer<List<String>>();\n    InputElement uploadInput = FileUploadInputElement();\n    uploadInput.multiple = true;\n    uploadInput.accept = \'image/*\';\n    uploadInput.click();\n\n    uploadInput.addEventListener(\'change\', (e) async {\n      final files = uploadInput.files;\n      Iterable<Future<String>> resultsFutures = files.map((file) {\n        final reader = FileReader();\n        reader.readAsDataUrl(file);\n        reader.onError.listen((error) => completer.completeError(error));\n        return reader.onLoad.first.then((_) => reader.result as String);\n      });\n\n      final results = await Future.wait(resultsFutures);\n      completer.complete(results);\n    });\n    //* need to append on mobile safari\n    document.body.append(uploadInput);\n    final List<String> images = await completer.future;\n    this.setState(() {\n      _isLoading = true;\n    });\n    await addFilesToStorage(widget.agreement.id, images, profileId);\n    uploadInput.remove();\n  } \n

\n

    await _listenImagesFromWeb().then((value) =>\n        setState(() {\n          images = loadImage();\n        })\n    );\n    updateState();\n  } \n

\n

floatingActionButton: kIsWeb\n            ? SpeedDial(\n          animatedIconTheme: IconThemeData(size: 22.0),\n          child: Icon(Icons.add),\n          closeManually: false,\n          children: [\n            SpeedDialChild(\n                child: Icon(Icons.photo_library),\n                label: translate(\'agreement.image_uploader.select_images_button\', context: context),\n                onTap: () => _callAddImagesFromWeb(context)),\n          ],\n        )\n            : SpeedDial(\n          animatedIconTheme: IconThemeData(size: 22.0),\n          child: Icon(Icons.add),\n          closeManually: false,\n          children: [\n            SpeedDialChild(\n                child: Icon(Icons.camera_alt),\n                label: translate(\'agreement.image_uploader.take_picture_button\', context: context),\n                onTap: () => _addMultiplyFile(context, true)),\n            SpeedDialChild(\n                child: Icon(Icons.photo_library),\n                label: translate(\'agreement.image_uploader.select_images_button\', context: context),\n                onTap: () => _addMultiplyFile(context, false)),\n          ],\n        ), \n

\n

\n

\n

错误：未找到：\'dart:html\'

\n

Answer 1

如果您遵循他们的说明，我会使用这个不错的项目 [https://pub.dev/packages/universal_html] ，它完全可以满足您的需求：

只需将 dart:html 导入替换为 package:universal_html/html.dart 即可。在浏览器中，将自动使用 dart:html。

它将确保代码在网络和移动目标上编译。如果是网络，它将自动导入 dart:html；如果是移动设备，它将提供虚拟函数。