How to run flutter on the emulator if you project has dart html imports

Question

I am using flutter for mobile and web app. I need to upload photos from both the mobile application and the web browser. There are no problems for the mobile application, everything works, and for the web version, the following solution was invented: I created a method for the web app so that photos can be uploaded from the desktop. For this I used import 'dart:html';, but if i try to run everything works fine in a web browser, but if I run it on a mobile application now, I get a bunch of errors saying that web imports (html) cannot be compiled.

I read the following issue, which said that you simply can’t call HTML methods in a mobile application. I forbade calling HTML methods if the application does not run in a web browser, but the result the same:

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)),
          ],
        ),

Error: Not found: 'dart:html'

Any update on this? or the only solution is use the package of the correct answer? — Hector Aguero, Jul 02 '21 at 17:14

score 8 · Accepted Answer · answered Jul 07 '20 at 08:37

I would use this nice project [https://pub.dev/packages/universal_html] which does exactly what you need, if you follow their instructions:

Just replace dart:html imports with package:universal_html/html.dart. In browsers, dart:html will be automatically used.

And it will make sure that code compiles both on web and mobile targets. It would automatically import dart:html in case of web and in case of mobile it would offer dummy functions.

How to run flutter on the emulator if you project has dart html imports

1 Answers1