31

I'm building a Flutter app that I am trying to make work on the web. Part of it contains some web specific code:

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');
  }
}

However the dart:html import gives the following error:

Avoid using web-only libraries outside Flutter web plugin packages

The longer version of the warning looks like this:

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.

And it's not just a warning. This actually prevents building an Android or iOS app (even though this method isn't accessible from non-Web Flutter apps).

The only solution I've figured out is to comment out the import when I am building for Android and iOS and then uncomment it when I am building for the web. Is there a better solution?

Marcin Orlowski
  • 72,056
  • 11
  • 123
  • 141
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393

2 Answers2

51

Use the universal_html package. It supports the browser, Dart VM, and Flutter and is a stand-in replacement for dart:html and other web related libraries.

dependencies:
  universal_html: ^1.2.1

Then instead of using import 'dart:html' as html; you can use the following import:

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

For those who came to this page for other related web import problems (like dart:js), this plugin also supports the following imports:

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';
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
  • `universal_html: ^1.2.2` wouldn't work for me, but `universal_html: ^1.2.1` as shown in [the linked documentation](https://pub.dev/packages/universal_html) did. – Stack Underflow Jun 03 '20 at 19:43
  • 1
    @StackUnderflow. OK, thanks for the notification. Maybe it is a bug in their versioning number. Anyway, I temporarily updated my answer to use `1.2.1`. – Suragch Jun 03 '20 at 23:35
  • I was using FunctionStringCallback and it was causing this error. Try changing it to a final variable. – Bensal Aug 28 '20 at 16:08
  • 1
    universal_html is unidentified, is there any alternative? – Shan Mk May 27 '22 at 05:37
1

Since the merge of Flutter-web into the main Flutter repository, it's no longer possible to directly add imports for web libraries (e.g. dart:html, or dart:js) in a Flutter project on the main channel when targeting Web, Android and iOS.

Use the universal html package which provides extensive support for multiple platforms and web libraries.

  1. From the root level of your project, command

    flutter pub add universal_html

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

This package isn't required to run some web files (e.g. dart:js). In my case, I just had to remove the import 'dart:js' import statement.

Sharon Atim
  • 1,777
  • 16
  • 12