Error while running app on ios or android using flutter

Question

I have created a web project including ios and android, the project works fine as a web, but I am facing the below error while running on Android:

../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:9:8: Error: Not found: 'dart:html'
import 'dart:html' as html;
       ^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:6:8: Error: Not found: 'dart:html'
import 'dart:html' as html;
       ^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:5:8: Error: Not found: 'dart:html'
import 'dart:html';
       ^
../../../Developer/flutter/.pub-cache/hosted/pub.dartlang.org/js-0.6.3/lib/js.dart:8:1: Error: Not found: 'dart:js'
export 'dart:js' show allowInterop, allowInteropCaptureThis;
^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:32:57: Error: Type 'html.EventListener' not found.
typedef _AddPopStateListener = ui.VoidCallback Function(html.EventListener);
                                                        ^^^^^^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:76:48: Error: Type 'html.EventListener' not found.
  external ui.VoidCallback addPopStateListener(html.EventListener fn);
                                               ^^^^^^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:34:39: Error: Type 'html.EventListener' not found.
  ui.VoidCallback addPopStateListener(html.EventListener fn);
                                      ^^^^^^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:97:39: Error: Type 'html.EventListener' not found.
  ui.VoidCallback addPopStateListener(html.EventListener fn) {
                                      ^^^^^^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:217:28: Error: Type 'html.EventListener' not found.
  void addPopStateListener(html.EventListener fn);
                           ^^^^^^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:223:31: Error: Type 'html.EventListener' not found.
  void removePopStateListener(html.EventListener fn);
                              ^^^^^^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:287:3: Error: Type 'html.Location' not found.
  html.Location get _location => html.window.location;
  ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:288:3: Error: Type 'html.History' not found.
  html.History get _history => html.window.history;
  ^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:291:28: Error: Type 'html.EventListener' not found.
  void addPopStateListener(html.EventListener fn) {
                           ^^^^^^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:296:31: Error: Type 'html.EventListener' not found.
  void removePopStateListener(html.EventListener fn) {
                              ^^^^^^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:7:7: Error: Type 'AnchorElement' not found.
final AnchorElement _urlParsingNode = AnchorElement();
      ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:20:7: Error: Type 'Element' not found.
final Element? _baseElement = document.querySelector('base');
      ^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:45:14: Error: Method not found: 'allowInterop'.
    getPath: allowInterop(strategy.getPath),
             ^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:46:15: Error: Method not found: 'allowInterop'.
    getState: allowInterop(strategy.getState),
              ^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:47:26: Error: Method not found: 'allowInterop'.
    addPopStateListener: allowInterop(strategy.addPopStateListener),
                         ^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:48:25: Error: Method not found: 'allowInterop'.
    prepareExternalUrl: allowInterop(strategy.prepareExternalUrl),
                        ^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:49:16: Error: Method not found: 'allowInterop'.
    pushState: allowInterop(strategy.pushState),
               ^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:50:19: Error: Method not found: 'allowInterop'.
    replaceState: allowInterop(strategy.replaceState),
                  ^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:51:9: Error: Method not found: 'allowInterop'.
    go: allowInterop(strategy.go),
        ^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/js_url_strategy.dart:76:53: Error: 'EventListener' isn't a type.
  external ui.VoidCallback addPopStateListener(html.EventListener fn);
                                                    ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:34:44: Error: 'EventListener' isn't a type.
  ui.VoidCallback addPopStateListener(html.EventListener fn);
                                           ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:97:44: Error: 'EventListener' isn't a type.
  ui.VoidCallback addPopStateListener(html.EventListener fn) {
                                           ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:217:33: Error: 'EventListener' isn't a type.
  void addPopStateListener(html.EventListener fn);
                                ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:223:36: Error: 'EventListener' isn't a type.
  void removePopStateListener(html.EventListener fn);
                                   ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:287:39: Error: Getter not found: 'window'.
  html.Location get _location => html.window.location;
                                      ^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:288:37: Error: Getter not found: 'window'.
  html.History get _history => html.window.history;
                                    ^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:291:33: Error: 'EventListener' isn't a type.
  void addPopStateListener(html.EventListener fn) {
                                ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:292:10: Error: Getter not found: 'window'.
    html.window.addEventListener('popstate', fn);
         ^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:296:36: Error: 'EventListener' isn't a type.
  void removePopStateListener(html.EventListener fn) {
                                   ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/url_strategy.dart:297:10: Error: Getter not found: 'window'.
    html.window.removeEventListener('popstate', fn);
         ^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:7:7: Error: 'AnchorElement' isn't a type.
final AnchorElement _urlParsingNode = AnchorElement();
      ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:7:39: Error: Method not found: 'AnchorElement'.
final AnchorElement _urlParsingNode = AnchorElement();
                                      ^^^^^^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:20:7: Error: 'Element' isn't a type.
final Element? _baseElement = document.querySelector('base');
      ^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/navigation/utils.dart:20:31: Error: Getter not found: 'document'.
final Element? _baseElement = document.querySelector('base');
                              ^^^^^^^^
../../../Developer/flutter/packages/flutter_web_plugins/lib/src/plugin_registry.dart:66:5: Error: Method not found: 'webOnlySetPluginHandler'.
    ui.webOnlySetPluginHandler(handleFrameworkMessage);
    ^^^^^^^^^^^^^^^^^^^^^^^
Unhandled exception:
FileSystemException(uri=org-dartlang-untranslatable-uri:dart%3Ahtml; message=StandardFileSystem only supports file:* and data:* URIs)
#0      StandardFileSystem.entityForUri (package:front_end/src/api_prototype/standard_file_system.dart:36:7)
#1      asFileUri (package:vm/kernel_front_end.dart:599:37)
#2      writeDepfile (package:vm/kernel_front_end.dart:738:21)
<asynchronous suspension>
#3      FrontendCompiler.compile (package:frontend_server/frontend_server.dart:562:9)
<asynchronous suspension>
#4      starter (package:flutter_frontend_server/server.dart:180:12)
<asynchronous suspension>
#5      main (file:///opt/s/w/ir/cache/builder/src/flutter/flutter_frontend_server/bin/starter.dart:13:24)
<asynchronous suspension>



FAILURE: Build failed with an exception.

* Where:
Script '/Users/mac/Developer/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 1035

* What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.
> Process 'command '/Users/mac/Developer/flutter/bin/flutter'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 34s
Exception: Gradle task assembleDebug failed with exit code 1

and this is the below main class:

import 'dart:async';

import 'package:meg/locator.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'package:meg/routs/app_router.dart';
import 'package:meg/routs/routs_names.dart';
import 'package:meg/screens/home/view/home_screen.dart';
import 'package:meg/services/navigation_service.dart';
import 'package:meg/utils/themes.dart';
import 'package:easy_localization/easy_localization.dart';
// import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'utils/colors.dart';

void main() async {
  await configureApp();

  runApp(
    EasyLocalization(
      supportedLocales: const [
        Locale('ar', 'EG'),
        Locale('en', 'US'),
      ],
      startLocale: Locale('en', 'US'),
      fallbackLocale:  Locale('ar', 'EG'),
      saveLocale: true,
      path: 'translations',
      child: MyApp(),
    ),
  );
}

Future configureApp() async {
  setUrlStrategy(PathUrlStrategy());
  setupLocator();
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  // await Firebase.initializeApp();

}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      title: tr('app_name'),

      theme: darkTheme,
      initialRoute: RouteName.MAIN,
      navigatorKey: locator<NavigationService>().navigatorKey,
      onGenerateRoute: AppRouter.generateRoute,
      // home: HomeScreen(),
    );
  }
}

this is the below yaml file:

name: l7
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  get_it: ^7.2.0
#  firebase_core: ^1.4.0
#  firebase_auth: ^3.0.1
#  cloud_firestore: ^2.4.0
#  firebase_storage: ^10.0.1
  easy_localization: ^3.0.0
  shared_preferences: ^2.0.6
  provider: ^5.0.0
  google_sign_in: ^5.0.7
  flutter_svg: ^0.22.0
  font_awesome_flutter: ^9.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/translations/en-US.json
    - assets/images/
    - assets/icons/



  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Project is available on github https://github.com/MHarooney/L7

Answer 1

The problem is that you're using Web specific libraries imports on your project. Those libraries will not be available depending on the underlying platform you're compiling to.

Try replacing dart:html imports with package:universal_html/html.dart from the universal_html package.

EDIT:

The problem is setUrlStrategy(PathUrlStrategy()); and it's import import 'package:flutter_web_plugins/flutter_web_plugins.dart';

The way to solve this problem is by creating two files:

web_url_strategy.dart:

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureUrl() {
  setUrlStrategy(PathUrlStrategy());
}

nonweb_url_strategy:

void configureUrl() {
  // No-op.
}

Then, on main.dart import it as:

import 'nonweb_url_strategy.dart'
    if (dart.library.html) 'web_url_strategy.dart';

and replace setUrlStrategy(PathUrlStrategy()); for configureUrl();