Flutter for frontend

Has anyone gotten Flutter to work as a front end? It transpiles to JavaScript, so I imagine it’s compatible with some finagling. Just curious if it’s been done, or if I’ll be going into this blind.

17 Likes

I‘m also interested in this one @stanley.jones

2 Likes

Good thread! I think I’d asked this question a while back when it wasn’t possible, but would love to know if anything has changed!

2 Likes

Update on this: I’m able to run a flutter web frontend in a canister running locally. Here’s what I did:

Build a flutter web app for release following the flutter docs.

After running flutter build web, copy everything from the output /build/web directory into your asset canister’s public folder.

Modify the dfx.json file to reference flutter’s generated main.dart.js file (ignore index.html). For example, in my flutter_on_ic project, I have:

"flutter_on_ic_assets": {
  "dependencies": [
    "flutter_on_ic"
  ],
  "frontend": {
    "entrypoint": "src/flutter_on_ic_assets/public/main.dart.js"
  },
  "source": [
    "src/flutter_on_ic_assets/assets",
    "dist/flutter_on_ic_assets/"
  ],
  "type": "assets"
}

Build and install your canisters, and launching the following URL will load your flutter frontend:

127.0.0.1:8000/?canisterId=

8 Likes

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

I believe you are correct in the fact you must implement a @dfinity/agent in Dart.

1 Like

Not sure how Dart interop with JS, but we are able to use Elm for frontend with very little JS glue code: https://github.com/chenyan2002/ic-elm/

Hi @mymikemiller, did you manage to call the IC from from a flutter app ?

I am looking for a Flutter developer who can help us move our app Weact.chat to Dfinity, in addition, to help with getting the current project out the door for the traditional cloud. If you have some spare cycles we should chat. ray@oblivion.io also works.

React or IC native language skills also work along with Rust. :slight_smile:

1 Like

Ha you’re right Dart Meets Rust: a match made in heaven ✨ - DEV Community

2 Likes

Actually I meant instead of Flutter for a browser version.

I was able to run a Flutter web app on Dfinity canister which was successful but I hit a wall also. On trying to deploy at the stage of Uploading assets to asset canister…,

I get error message:

**The replica returned an HTTP Error: Http Error: status 413 Payload Too Large, content type "text/plain; charset=UTF-8", content: Request 0x4112050935eefd410ed867f7038a3519c99ea9eeee00aaea47ececa4427afaaf is too large.**

I don’t know if this was your challenge @mymikemiller or if anyone else has come across this.

The image shows my progress.
The right image is the Flutter web and the left is the Flutter canister. Code works fine only the UI giving issue.

hey @umekalu ! welcome to the community :slight_smile:
maybe this helps?

@cryptoschindler Thanks for your help.
My dist contains 5.3MB (.js file = 1.3MB and the .map = 3.9MB) of data while the source is 8.9MB.

Challenge is I can’t locate the actual file that contains this item text/plain; charset=UTF-8 in the error message which is generating the error. I tried removing the generated HTML file because it contains still I get the same error.

Also, is there any possibility of chunking the frontend code as you said?

My dist is actually 5.1M and src is 3.6M.

Is there anywhere I can increase the

I don’t believe text/plain is pointing to the file, it’s just the content type in the header of the HTTP message you received as an error. I don’t know if there is a standard procedure to chunk the files, but i would try to split up my codebase in different, so that no single file is bigger than 2MB.

Hey, thanks for joining the dev call and asking your question!
With the newest release of dfx, the file size limit has been removed. So maybe try installing the new dfx version and try again :slight_smile:

5 Likes

Wow! Awesome!
Thanks a lot.

1 Like

I am working on a ic-service with a flutter-frontend, currently this is where im at with hosting the flutter on the ic with the dfx asset canister (0.7.0-beta.2), i got this error:
Uncaught SyntaxError: expected expression, got ‘<’[main.dart.js:1]

Mendment: without the webpack file that error is gone.

There is this error that comes up when Its uploading the assets:
The Replica returned an error: code 5, message: “Canister exceeded its allowed memory allocation”? the files are total 4.3 mb.