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.

8 Likes

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

1 Like

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=

5 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!

1 Like

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

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. [email protected] 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

1 Like

Actually I meant instead of Flutter for a browser version.