flutterdart-htmldart-define

import dart:html throws error when build on android emulator, but I need html


My flutter app uses a maps API key as below.

create_script_element.dart

import 'dart:html';
import 'current_flavour.dart';

void createScriptElement() {
  ScriptElement script = ScriptElement();

  script.src = "https://maps.googleapis.com/maps/api/js?key=${currentFlavor()}&language=en&libraries=drawing&callback=Function.prototype";
  script.id = "super-script";

  document.head?.append(script);
}

Another file 'current_flavour.dart' has the keys

const String flavorDev = "dev-key";
const String flavorProd = "prod-key";

String currentFlavor() {
  final flavor = const String.fromEnvironment("flavor", defaultValue: "dev");
  if (flavor == "prod") {
    return flavorProd;
  }

  return flavorDev;
}

This app is running perfectly as web app,

flutter run -d chrome --dart-define=flavor="prod"

but when I run on android emulator,

flutter run -d emulator-5554 --dart-define=flavor="prod"

it fails because of importing html. How should I proceed to run it on all platforms?


Solution

  • dart:html is not designed for mobile platforms, you can use Universal html instead or you can use conditional import depending on the cross platform.