Flutter and Openlayers - including js libraries in flutter

Question

Coming from the js/cordova based cross-platform universe, I am digging into flutter lately. So I wonder about the options to make use of the various js libraries in flutter directly. More concrete I am interested in using the openlayers library in flutter to create a versatile map view with various functions for drawing and editing. So I wonder what options are there to include it.

So far I see two major ways:

1. Using a webview: Even though there is no native webview widget yet in flutter there is a plugin for this (https://github.com/dart-flitter/flutter_webview_plugin). The main advantage I see here is to use the openlayers library "as it is", however the plugin is in kinda early state and I could not see a way to establish communication between flutter and js functions in the webview yet. Futhermore (this is just my assumption) using the webview is probably slower than creating a proper widget with dart code.

2. Creating a custom widget: I have seen there are ways to convert js code direcly to dart, using package js (https://pub.dartlang.org/packages/js) and for typings js_facade_gen (https://github.com/dart-lang/js_facade_gen) like it is done with the chartjs library (https://github.com/google/chartjs.dart/). So similar to this it should be possible to automatically convert the openlayers lib to dart. The main issue however is to integrate this into flutter, since openlayers is using a html5 canvas if I'm correct. Also the chartjs.dart package does not giva any hints how to include it in a flutter app. I've also seen there is a leaflet plugin (https://github.com/apptreesoftware/flutter_map) which is creating their own widget, however they seem to rewrite the code by hand (?), which is for openlyers with 20.000 lines of code not really an option atm.

I'm aware that this is not the best question format for this site, nonetheless I hope someone has some advice or hints on where to start or how to implement this, especially for the 2nd option - the first one is more straight forward. Or if you can think of a third option, go ahead please, I'm grateful for any clues.

Answer 1

The only way to make use of JS in Flutter is using WebView.

Dart compiles to JS only for browser applications, for Flutter it compiles to native machine code.

convert js code direcly to dart, using package js

package JS doesn't convert JS, it just creates proxies for JS functions to be able to call them from Dart, but that is also only supported in Dart web applications.