Cross-platform site built with Flutter on ICP?

Developers Programs & Applications
1

So is it possible to build a cross-platform site with a low or no-code builder like Flutter, so that the site can be easily accessed with Android or iphone, tablet, mobile, PC, iOS…and have that site fully on chain on ICP?

2

Any site that works with static file hosting works on ICP. It may require some scripting to get the built files in the right place, but it’s not hard

3

Would a Facebook clone site work with static file hosting?

4

User-generated content usually is not handled with static files. For that I would say that you need to write some code yourself, for which you need to at least grasp the basics of ICP and its technologies

5

So am I able to list potential job here for ICP devs?

6

I don’t see a problem with it :slightly_smiling_face:

1 Like
7

Fun fact: The first version of https://nns.ic0.app was written in flutter. We migrated away from it but I know that flutter has matured so maybe it’s a great choice by now.

Which low code builder were you thinking of using? FlutterFlow?

2 Likes
8

Yes, I was hoping to use Flutterflow, but I need to know the code and how to add it for this workflow to be successful. Any suggestions?

9

Our experience of using flutter was such along time ago that I can’t really say. You will presumably still need ic-agent to be able to make API calls and manage login session delegations. We used the javascript library for that, and Flutter’s ability to call out to js.

10

To my knowledge, there is indeed no native Flutter library for this purpose (please correct me if this is no longer accurate), and you would need to access the IC through a JavaScript bridge.

Something like: Flutter activity <> JS <> IC.

11

Ok, so is there any pre-made javascript available somewhere to bridge from the Flutterflow site to IC?

12

For the bridge itself I’m not aware of any ready made solution but aware if anybody in the community has build one, please say so.

Regarding the JavaScript interaction with the IC the communication layer is agent-js (https://github.com/dfinity/agent-js/) and there are a bunch of libraries that ease the interaction with the IC and various well-known canisters types (https://github.com/dfinity/ic-js).

13

Thanks for the info!
And yeah…if any dev has already been down this road…I as a no-coder would be happy to talk and discuss payment for such code

2 Likes
14

There is a native Dart and Flutter library agent ic_tools | Dart package (does not use agent-js) that works for Dart/Flutter on the Web and on desktop Linux. I am using it for 2+ years now, it is awesome.

A quick search shows you can integrate packages into FlutterFlow using Custom Actions or Custom Widgets Custom Code - Deep Dive | FlutterFlow Docs.

2 Likes
15

Did not knew, that’s awesome! Thanks for the share

1 Like
16

Would that Dart package also work for Flutterflow on mobile? iOS?

17

@levi That is super cool. Do you have any examples of current IC websites and/or apps using flutter?

1 Like
18

And, can a no-code site built with Flutterflow be 100% hosted on ICP? With a domain name such as “Domain.com”

19

Mobile and ios in the web browser yes.

For the apple app-store and android app-store it’s not set up out-of-the-box to work on those platforms at the moment. It could be set up to work on those platforms pretty easily for someone who needs, let me know if it is the case, I will be glad to point the direction and accept a PR for support for those platforms. I myself don’t have a need for android or apple app-stores. Note that the internet-computer cannot serve apps through the apple or android appstore. Only through the browser it can be 100% decentralized and on-chain.

If it is a web-app served through the browser then yes. Otherwise no.

20

Hey @bitdivine, thanks! I was waiting for the repo to be made public and now it is! The best sample is the CYCLES-TRANSFER-STATION Flutter frontend for which the source code is now public.

Featuring:

  • PWA compatibility, add it to the home screen and it works just like a regular app,
  • Internet-Identity login with a single function call, using the SubtleCrypto web api for the session keys and extractable: false for the highest security. Also with the ability to save and load the SubtleCrypto session keys across browser sessions using IndexDB with a simple function call.
  • Reproducible builds!

The CTS frontcode is the most up-to-date and comprehensive usage of the ic_tools dart library.

Documentation for the library is here: ic_tools - Dart API docs.

The ic_tools dart library is open-source: GitHub - levifeldman/ic_tools.

Let me know if you need specific examples for calling canisters or candid encoding/decoding, I can help.

2 Likes