Migrate to `package:web` package to support WASM

[IchordeDionysos]

The short version:

• Migrate usage of dart:html to package:web
• Migrate usage of dart:js, dart:js_util, and package:js to dart:js_interop

This will also compiling to WASM engine instead of just JavaScript on web.

Full migration guide: https://dart.dev/interop/js-interop/package-web

[The-RootCause]

Any updates on this issues ? it's breaking wasm compilation.
Thank you

[a-h-mzd]

Any updates/ETA on this?

[EchoEllet]

We forked the package and published it in flutter_keyboard_visibility_temp_fork as a temporary solution.

Looking forward to see future changes in this repo.

[Afroz-Shaikh]

Any updates on resolving this issue that's causing WASM compilation to fail?

[GustavoFigueira]

Any updates on resolving this issue that's causing WASM compilation to fail?

Hey @Afroz-Shaikh, take a look at this issue. Check if it solves the problem for you.

EchoEllet#3 (comment)

[Afroz-Shaikh]

Any updates on resolving this issue that's causing WASM compilation to fail?

Hey @Afroz-Shaikh, take a look at this issue. Check if it solves the problem for you.

EchoEllet#3 (comment)

Thanks @GustavoFigueira !! This Solved the problem for me

[noordawod]

+10 here

[omidraha]

I'm trying to run my Flutter app using the new WebAssembly support via:

flutter run -d chrome --wasm

But the build fails due to usage of dart:html and dart:js in the following plugins:

❌ Incompatible packages:

• flutter_keyboard_visibility_web v2.0.0
• flutter_secure_storage_web v1.2.1
• js v0.6.7 (indirect dependency)

💥 Error output:

Error: Dart library 'dart:html' is not available on this platform.
import 'dart:html' as html show window, Navigator;
...
Error: Dart library 'dart:js' is not available on this platform.
export 'dart:js' show allowInterop, allowInteropCaptureThis;
...
Error: Type 'html.Navigator' not found.

These packages rely on browser-specific libraries (dart:html, dart:js, dart:js_util), which are no longer supported in the Dart-to-Wasm toolchain.

---

✅ Feature request

Could you please consider:

• Migrating to [dart:js_interop](https://api.dart.dev/stable/dart-js_interop/dart-js_interop-library.html) or
• Guarding browser-specific imports behind runtime or conditional imports
  so that these packages become compatible with Flutter WebAssembly builds?

---

ℹ️ Context

• Flutter version: 3.22+
• Dart SDK: >=3.3
• Build target: --wasm

Traceback

 flutter run -d chrome --wasm
Launching lib/main.dart on Chrome in debug mode...
Target dart2wasm failed: ProcessException: Process exited abnormally with exit code 254:
../../../../.pub-cache/hosted/pub.dev/flutter_keyboard_visibility_web-2.0.0/lib/flutter_keyboard_visibility_web.dart:1:8: Error: Dart library 'dart:html' is not available on this platform.
import 'dart:html' as html show window, Navigator;
       ^
Context: The unavailable library 'dart:html' is imported through these packages:

    web_plugin_registrant.dart => package:flutter_keyboard_visibility_web => dart:html
    web_plugin_registrant.dart => package:flutter_secure_storage_web => dart:html

Detailed import paths for (some of) the these imports:

    main.dart => web_plugin_registrant.dart => package:flutter_keyboard_visibility_web/flutter_keyboard_visibility_web.dart => dart:html
    main.dart => web_plugin_registrant.dart => package:flutter_secure_storage_web/flutter_secure_storage_web.dart => dart:html
    main.dart => web_plugin_registrant.dart => package:flutter_secure_storage_web/flutter_secure_storage_web.dart => package:flutter_secure_storage_web/src/subtle.dart => dart:html

../../../../.pub-cache/hosted/pub.dev/js-0.6.7/lib/js.dart:10:1: Error: Dart library 'dart:js' is not available on this platform.
export 'dart:js' show allowInterop, allowInteropCaptureThis;
^
Context: The unavailable library 'dart:js' is imported through these packages:

    web_plugin_registrant.dart => package:flutter_secure_storage_web => package:js => dart:js

Detailed import paths for (some of) the these imports:

    main.dart => web_plugin_registrant.dart => package:flutter_secure_storage_web/flutter_secure_storage_web.dart => package:flutter_secure_storage_web/src/subtle.dart => package:js/js.dart => dart:js

../../../../.pub-cache/hosted/pub.dev/flutter_secure_storage_web-1.2.1/lib/flutter_secure_storage_web.dart:5:8: Error: Dart library 'dart:html' is not available on this platform.
import 'dart:html' as html;
       ^
../../../../.pub-cache/hosted/pub.dev/flutter_secure_storage_web-1.2.1/lib/src/subtle.dart:21:8: Error: Dart library 'dart:html' is not available on this platform.
import 'dart:html';
       ^
../../../../.pub-cache/hosted/pub.dev/flutter_keyboard_visibility_web-2.0.0/lib/flutter_keyboard_visibility_web.dart:10:35: Error: Type 'html.Navigator' not found.
  FlutterKeyboardVisibilityPlugin(html.Navigator navigator);
                                  ^^^^^^^^^^^^^^
../../../../.pub-cache/hosted/pub.dev/flutter_secure_storage_web-1.2.1/lib/flutter_secure_storage_web.dart:94:10: Error: Type 'html.CryptoKey' not found.
  Future<html.CryptoKey> _getEncryptionKey(
         ^^^^^^^^^^^^^^
../../../../.pub-cache/hosted/pub.dev/flutter_secure_storage_web-1.2.1/lib/src/subtle.dart:68:12: Error: Type 'CryptoKey' not found.
  external CryptoKey get privateKey;
           ^^^^^^^^^