Flutter for frontend

I spoke too soon.

I’ve hit a wall and decided that, while it’s possible to host a Flutter frontend in a canister (see above post), it’s not possible for that frontend to interact with any of your other canisters in the way that javascript-based frontends (like React) can. I hope someone is able to prove me wrong eventually, because I would really like to develop on the IC using Flutter for the frontend.

My goal is to create a Dart package that allows Dart code to interact with my motoko canister, ideally without me having to re-implement the interface in Dart but at this point I’d settle for that…

I looked into using package:js/js.dart which is designed to be used on the frontend, in the context of a browser (see this issue).

Seems that to make package:js work with my own JavaScript library, I need to load my js library by including it in the .html file (see this example project). This didn’t work for me because I couldn’t get dfx.json’s frontend.entrypoint to successfully reference a .html file while pulling in the required javascript. I tried to follow the recommendation here, but it ended up just injecting the entire contents of my html file (html/head/body tags and all) into the body of the served page, and I couldn’t get it to execute the script tags to pull in the necessary scripts.

If I set frontend.entrypoint to Flutter’s generated build/web/main.dart.js file, as in my optimistic post above, I don’t get any of the other necessary files, namely the javascript file generated from the motoko that needs to be there for me to do the interop. Maybe it’s because I have zero experience with webpack or with package:js, but I couldn’t figure out how to get package:js to expose the motoko functions to dart.

Even if I could get interop to work using this method for Flutter-for-web on the frontend in the context of a browser, it wouldn’t work when built for iOS or Android. So I’m giving up for now.

Seems like it might just be easier to build my own interface to my canisters by making http calls à la the auto-generated Candid web interface.

Sorry for the brain-dump. Wanted to get that all out before I switch gears and look into the Candid option. I’m all-ears if you have any suggestions for the interop method, though!

3 Likes