How To Run a Flutter Web Application Offline?

Question

I got a problematic assignment from my employers. I was given the task of developing simple software that will run strictly on Google Chrome, without attempting to connect to the web (Security reasons).

I know flutter development and I feel comfortable with the sdk. How should I develop a web app that can be deployed using a usb stick? Looks like PWA can be an option, but the documentation is lacking in detail.

• The system does not have the ability to run a local web server.
• The Flutter app must be able to work with JS libraries, I intend to use jsQR.

Answer 1

service workers and indexedDB could help you for develop offline route app and offline api.

mdn docs for service workers

Answer 2

I'm not sure that this will fit your particular case: you say that the system can't run a local webserver, but what if you provide the webserver along with your software?

I just discovered get_server: you can find it here. It aims to allow developers to host their own HTTP server by using only flutter, without resorting to external tools or other coding/scripting languages. It allows also (and that's the relevant part) to wrap your flutter web app and make it run on local network.

For now I only tried with a very simple example, but it seems to be working. These are the steps I took:

• create a new flutter project: since I needed the webserver to run on Windows, I had to get flutter ready for that (see here for help)

• add get_server to the new pubspec.yaml

• run flutter build web on your flutter web project, and copy the build/web output folder in the root folder of the new project (I renamed the folder while copying since flutter might change the content of the web folder)

• delete all the content of lib/main.dart

• paste this (this the actual content of main.dart)

  import 'package:get_server/get_server.dart' as gs;
  void main() {
    gs.runApp(
      gs.GetServerApp(home: gs.FolderWidget('folderName')),
    );
  }
  

folderName is the name of the renamed folder containing the flutter web app build.

I ran this on Windows 'device' from AndroidStudio, and my original flutter web app was reachable at localhost:8080 (for now I just used the default options of get_server). I also got the webserver (empty) GUI as a white window: I guess that can be useful for some information regarding the server itself, although, if that windows closes, localhost:8080 becomes unavailable. But, once released, you should be able to just run the executable from the USB stick, and then connect to it with Chrome.

PS: after some time using GetServer, I had to switch to other packages because of not-so-good docs and support. Now I'm using shelf, but also Alfred is a notable mention.