The date of publication is important. If you’re reading this and it’s not September 2019 then there might be a better solution to the problem I’ll be describing below.
If it is September 2019, and/or the problem below does affect you, then welcome, enjoy, and bask in the information that will be shared with you.
Don’t care about the background info and just want a solution? Scroll to the end.
Take a look at the Github issue below for a detailed overview of the problem. Scroll to the bottom of the issue - there might even be a solution to the problem we’ll be discussing.
Still here? Guess people are still working on the issue.
Let’s begin with a quick overview of Packages and Plugins:
Dart packages: General packages written in Dart, for example the path package. Some of these might contain Flutter specific functionality and thus have a dependency on the Flutter framework, restricting their use to Flutter only, for example the fluro package.
Plugin packages: A specialized Dart package which contain an API written in Dart code combined with a platform-specific implementation for Android (using Java or Kotlin), and/or for iOS (using ObjC or Swift). A concrete example is the battery plugin package.
A plugin is essentially a way to perform platform specific functionality from dart code (using widgets) - think fingerprint reader, storage, shared preferences and camera.
We can make plugins for Android, using
We can make plugins for iOS, using
What about Web, using
Well that’s a lie, technically you can make web plugins, however I’m not sure if there is consensus on the correct way to do this. You can make use of relative file imports to import the relevant platform code - see this Github issue for more information, or alternatively give this Medium post a read.
But point remains - how do I use
“All I want to do is create an external link” - As said by me, myself and I.
Dart as a language targeted the web way before Flutter became a thing. For more information on using Dart for the web, see https://webdev.dartlang.org. It can also be used in conjunction with Angular.
Point is, there are Dart libraries available to target and build for the web.
An example of such a library is dart:html:
HTML elements and other resources for web-based applications that need to interact with the browser and the DOM (Document Object Model).
This library includes DOM element types, CSS styling, local storage, media, speech, events, and more. To get started, check out the Element class, the base class for many of the HTML DOM types.
With the recent merge of Flutter-Web into the main Flutter repository it is no longer possible (at the time of writing) to directly do one of the following imports:
These libraries are platform specific, i.e. the Web/Browsers.
They cannot be used within an Android or iOS application. As such, if you’re using Flutter Web on the main Flutter channel, in a project targeting Web, Android and iOS - then your IDE will likely throw this error:
Target of URI doesn't exist
The error you see above is caused by the Flutter Analyzer SDK, see this comment below from the Github issue:
Flutter has two copies of the Dart SDK. One - used by flutter tools - has the dart:html library and the standard Dart web compilers. That allows the flutter tool to build flutter for web apps. That copy lives in //bin/cache/dart-sdk/
The other copy of the Dart SDK is used to analyze user code against. That copy lives in //bin/cache/pkg/sky_engine/lib/. The libraries there are defined in the flutter/engine repo in https://github.com/flutter/engine/blob/master/sky/packages/sky_engine/lib/_embedder.yaml.
We had a meeting with the Dart Analyzer team and are moving forward with adding
dart:jsto the Flutter Analyzer SDK
While writing this article this was the last comment for the Github issue. Meaning that, depending on when you’re reading this, it might no longer be an issue.
So try and import
dart:js. If it works, great! You wasted your time reading this article. Don’t feel bad, I wasted my time writing it.
You can use the universal_html package in the meantime:
Cross-platform dart:html that works in the browser, Dart VM, and Flutter. Typical use cases are:
- Cross-platform application development (e.g. Flutter mobile and web versions).
- Web crawling and scraping
HTML, import like this:
import 'package:universal_html/prefer_universal/html.dart' as html;
Simple example, let’s open a link.
Let’s pop a window:
import 'package:universal_html/prefer_universal/js.dart' as js;
Let’s pop a window:
js.context.callMethod('alert', ['Hello, world!']);
Again, depending on when you’re reading this, you might not need universal_html. You might not even need
But that’s for the future. For now, if you want to open a link, for example, then you need access to