Add flet build web --wasm (now available in flutter)

[hololeo]

Part of this comment (Tasks) was written by the flet-dev Team

More info: https://docs.flutter.dev/platform-integration/web/wasm

Tasks for WASM support

Based on @ndonkoHenri build log below (thank you!) I can see the following changes to support WASM:

• [ ] Update permission_handler: https://github.com/Baseflow/flutter-permission-handler/pull/1303
• [ ] Update record: https://github.com/llfbandit/record/issues/311
• [ ] Update package_info_plus to 6.0.0+ in serious_python.
• [x] In Flet package:
  • [x] lib/src/flet_server_protocol_javascript_web.dart
  • [x] lib/src/utils/platform_utils_web.dart in Flet package.
  • [x] lib/src/utils/session_store_web.dart in Flet package.
• [ ] Update flutter_native_splash to 2.4.0+ with WASM-related fixes (https://pub.dev/packages/flutter_native_splash/changelog)

Original Comment

Please add Flutter build web --wasm support to flet

Very exciting changes to Flutter web. It supports compiling main.dart.js into wasm and the skia engine.

The download size is dramatically reduced from 30 megs to 6 megs, and much faster start up of less than 3 seconds vs 10+. see https://docs.flutter.dev/platform-integration/web/wasm

example you can try right now

https://flutterweb-wasm.web.app/

i have tested this on my old iphone6 and it works extremely well

Watch this recent video of the announcement. it is in beta and available as of writing. linked to relevant talk

youtube talk about flutter web wasm

Please include this in Flet so our Flet web pyiode deploys can get much smaller and faster!

[hololeo]

this may also be helpful

Requires JS-interop to access browser and JS APIs
#
To support compilation to Wasm, Dart has shifted how it enables interop with browser and JavaScript APIs. This shift prevents Dart code that uses dart:html or package:js from compiling to Wasm.

Instead, Dart now provides new, lightweight interop solutions built around static JS interop:

package:web, which replaces dart:html (and other web libraries)
dart:js_interop, which replaces package:js and dart:js

https://dart.dev/interop/js-interop

[hololeo]

errors encountered by @ndonkoHenri

https://github.com/ndonkoHenri/test-flet-github-actions/actions/runs/8772266592/job/24071006981#step:6:656

package:flet/src/controls/checkbox.dart => 
package:flet/src/controls/cupertino_checkbox.dart => 
package:flet/src/controls/list_tile.dart => package:flet/src/utils/text.dart => 
package:flet/src/utils/launch_url.dart => 
package:flet/src/utils/platform_utils_web.dart => dart:html
    ...

/home/runner/.pub-cache/hosted/pub.dev/package_info_plus-4.2.0/lib/src/package_i
nfo_plus_web.dart:2:8: Error: Dart library 'dart:html' is not available on this 
platform.
import 'dart:html';
       ^
/home/runner/.pub-cache/hosted/pub.dev/flet-0.22.0/lib/src/utils/platform_utils_
web.dart:2:8: Error: Dart library 'dart:html' is not available on this platform.
import 'dart:html' as html;

[FeodorFitsner]

Wow, that looks like a future!

Btw, it's possible to add --wasm option even today with https://flet.dev/docs/publish#extra-args-to-flutter-build-command (provided package_info_plus is fixed or mocked).

[FeodorFitsner]

Re package_info_plus - look at two last FEAT items, we need to upgrade to 6.0: https://github.com/fluttercommunity/plus_plugins/blob/main/packages/package_info_plus/package_info_plus/CHANGELOG.md#600

[ndonkoHenri]

Btw, it's possible to add --wasm option even today

Yeah, I tried that: https://github.com/ndonkoHenri/test-flet-github-actions/actions/runs/8772266592/job/24071006981#step:6:5 (Make sure to use either the beta or main channel, cause that's where that flag is available for now)

What's package_info_plus? Have we being using it?

I could perhaps be of help in the package migrations.