如果您的項目有 dart html 導入，如何在模擬器上運行 flutter

Question

我在手機上使用 flutter，在應用程序上使用 web。 我需要從移動應用程序和 web 瀏覽器上傳照片。 移動應用程序沒有問題，一切正常，對於web版本，發明了以下解決方案：我為web應用程序創建了一個方法，可以從桌面上傳照片。 為此，我使用了import 'dart:html'; , 但如果我嘗試在 web 瀏覽器中運行一切正常，但如果我現在在移動應用程序上運行它，我會收到一堆錯誤，說 web 導入 (html) 無法編譯。

我閱讀了以下問題，其中說您根本無法在移動應用程序中調用 HTML 方法。 如果應用程序未在 web 瀏覽器中運行，我禁止調用 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'

Answer 1

我會使用這個不錯的項目 [https://pub.dev/packages/universal_html]，如果您按照他們的說明進行操作，它可以完全滿足您的需求：

只需將 dart:html 導入替換為 package:universal_html/html.dart。 在瀏覽器中，dart:html 將被自動使用。

它將確保代碼在 web 和移動目標上都能編譯。 如果是 web，它將自動導入 dart:html，如果是移動設備，它將提供虛擬功能。

Answer 2

我正在使用 flutter 移動和 web 應用程序。 我需要從移動應用程序和 web 瀏覽器上傳照片。 移動應用程序沒有問題，一切正常，對於 web 版本，發明了以下解決方案：我為 web 應用程序創建了一個方法，以便可以從桌面上傳照片。 為此，我使用了import 'dart:html'; ，但是如果我嘗試在 web 瀏覽器中運行一切正常，但是如果我現在在移動應用程序上運行它，我會收到一堆錯誤，說 web 導入（html）無法編譯。

我閱讀了以下問題，其中說您根本無法在移動應用程序中調用 HTML 方法。 如果應用程序不在 web 瀏覽器中運行，我禁止調用 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'