How to use Speckle Viewer in a Flutter WebView?

Thanks in advance for your help!

I’m working on integrating the Speckle Viewer into a mobile Flutter app. The Speckle Viewer is written in JavaScript and utilizes the @speckle/viewer library. Is there a way to use JavaScript libraries in a Flutter app? I came across some articles about using the flutter_js package, but I’m having trouble understanding it. I have managed to run JavaScript code in a Flutter WebView by linking libraries through a CDN, but it doesn’t seem to work with the Speckle Viewer. Any suggestions?

As mentioned, using a CDN didn’t work; the page stays blank and I receive the following errors:

  • Uncaught SyntaxError: Cannot use import statement outside a module
  • Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “../”.

I also tried downloading the package via npm and referencing it locally, but I encountered the same SyntaxError, though not the TypeError.

When I include <script type="module" src="script.js"></script>, I get: Access to script at … from origin ‘null’ has been blocked by CORS policy.

On the other hand, using a URL like https://app.speckle.systems/projects/08ec61c09a/models/549ff948ec works fine, which makes me think it should be possible to get this working.

This is my first question here, and I would greatly appreciate any assistance to help me complete this project.

I’m relatively new to Flutter and have 0 JS knowledge, thank you very much for your patience.

https://github.com/Matheus-Rossetti/Amvali3D/tree/StackOverflowQuestion