Avoid using web-only libraries outside Flutter web plugin packages

Question

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?

Answer 1

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

Answer 2

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.