javascript - Flutter and Openlayers - including js libraries in flutter - Stack Overflow

admin管理员组

文章数量:1402775

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 (). 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 munication 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 () and for typings js_facade_gen () like it is done with the chartjs library (.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 () 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.

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./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 munication 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/packages/js) and for typings js_facade_gen (https://github./dart-lang/js_facade_gen) like it is done with the chartjs library (https://github./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./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.

• javascript
• dart
• flutter
• openlayers

Share Improve this question Follow asked Jun 18, 2018 at 15:32 ChrisChris 4,40677 gold badges2929 silver badges5151 bronze badges 2

• take a look at this package. github./apptreesoftware/flutter_map It is leaflet port to dart, so you can ask repo owner for any hints – Tree Commented Jun 18, 2018 at 15:43
• @Tree thanks, yes I have seen this repo. Still looking through the code – Chris Commented Jun 18, 2018 at 15:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

Dart piles to JS only for browser applications, for Flutter it piles 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.

本文标签： javascriptFlutter and Openlayersincluding js libraries in flutterStack Overflow