How to port Flutter App

ari

Hello.

I've just discovered a way to remove the service worker requirement from Flutter Web Applications. Making it much easier to create a simple Flutter Application for Ubuntu Touch.

Here's a little tutorial for anyone who might want to try it out:

Compile your flutter application with the following:

flutter build web --pwa-strategy none

Change the index.html base to:

<base href="">

Optional: add the following to the body to prevent right click menu on long press

<body oncontextmenu="return false;">

Then change line 48 of flutter.js to

return this._loadWithServiceWorker(entrypointUrl, null);

(This will disable the service worker)

You can test it out with the following:

brave --allow-file-access-from-files index.html

For Ubuntu Touch:

Create an HTML clickable app.

Copy the flutter compiled /web to the clickable www.

Add the following to the .desktop exec after webapp-container:

--local-content-can-access-remote-urls

That's it. You now have a super simple app made from flutter, no local server needed. (I wouldn't expect the camera or any phone specific functions to work, but there's still a lot you can do.)

I've just published an example "Pictionary Generator" to the open store you can try.

Glencouls

Nice job making this Flutter app work for touch and making such detailed notes that others can easily follow.

javperan

Hello,

Iam trying to run a flutter app into UT with your indications. However, I cannot find the requiered line number 48 in the flutter.js file (I guess the template has changed since your pos)t. Could be a little more specific? Thanks in advance!

ari

@javperan yup, looks like the template has changed since.

Currently, I'd probably change line 360:

await serviceWorkerLoader.loadServiceWorker(serviceWorker).catch(e => {

to:

await serviceWorkerLoader.loadServiceWorker(null).catch(e => {

Basically, I'm trying to find the section of the code that checks for the service worker, which is in line 117:

loadServiceWorker(settings) {
  if (settings == null) {
    // In the future, settings = null -> uninstall service worker?
    console.debug("Null serviceWorker configuration. Skipping.");
    return Promise.resolve();
  }
  ...

Here you can see it checks if 'settings' is null, and seems to handle it gracefully, so any way you can force it to run through that if statement would work fine.