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

Posted 2023-02-23

【中文标题】如果您的项目有 dart html 导入，如何在模拟器上运行颤振

【英文标题】：How to run flutter on the emulator if you project has dart html imports

【发布时间】：2020-10-24 01:04:12

【问题描述】：

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

我阅读了以下问题，其中说您根本无法在移动应用程序中调用 HTML 方法。如果应用程序不在网络浏览器中运行，我禁止调用 HTML 方法，但结果相同：

import 'dart:html';

Future<void> _listenImagesFromWeb() async 
    if (!kIsWeb)
      return;
    final String profileId = (await FirebaseAuth.instance.currentUser()).uid;

    final completer = Completer<List<String>>();
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.multiple = true;
    uploadInput.accept = 'image/*';
    uploadInput.click();

    uploadInput.addEventListener('change', (e) async 
      final files = uploadInput.files;
      Iterable<Future<String>> resultsFutures = files.map((file) 
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      );

      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    );
    //* need to append on mobile safari
    document.body.append(uploadInput);
    final List<String> images = await completer.future;
    this.setState(() 
      _isLoading = true;
    );
    await addFilesToStorage(widget.agreement.id, images, profileId);
    uploadInput.remove();
   

    await _listenImagesFromWeb().then((value) =>
        setState(() 
          images = loadImage();
        )
    );
    updateState();
   

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

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

【问题讨论】：

这有什么更新吗？还是唯一的解决方案是使用正确答案的包？

【参考方案1】：

如果您按照他们的说明进行操作，我会使用这个不错的项目 [https://pub.dev/packages/universal_html]，它可以满足您的需求：

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

它将确保代码在 Web 和移动目标上都可以编译。如果是 web，它将自动导入 dart:html，如果是移动设备，它将提供虚拟功能。