Mapbox-gl-native: Supporting Flutter

[tribuipi]

Hi MapBox team,

Flutter (https://flutter.io) is a new cross-platform mobile development framework which has just been released (beta version). It's quite new and lacking some advanced UI components like Maps, Charts...

Fortunately, Flutter supports a way to render its widgets backed by an OpenGL Texture (https://docs.flutter.io/flutter/widgets/Texture-class.html) so it might be a possible way to implement a MapBox widget in Flutter.

(Reference: https://github.com/flutter/flutter/issues/73)

Has your team had any plan to support Flutter in the future? If not, can you give us some guidelines to start integrating MapBox with Flutter?

Thank you.
Best regards,

[israelg99]

Is there any ETA on this? I'm considering either using Flutter or switching to native iOS and Android development depending on the ETA.

[tobrun]

I don't have an ETA on this, analysis for it haven't started yet.

[tobrun]

Haven't looked much into this but I was able to find https://github.com/flutter/flutter/issues/7053: Capturing from that issue that direct communication between dart and c++ code is not possible and that we have to bridge with java / objective c for now. This means we will need use our Android and iOS SDK as a base for building out flutter integration. This kind of setup matches what we already do for reactnative in https://github.com/mapbox/react-native-mapbox-gl.

cc @nitaliano @zugaldia

[tobrun]

Dumping some thoughts after digging through the documentation, it seems we need to implement this as a plugin as opposed to a widget approach from OP. We be able to publish the plugin as a dart package so developers can use the code in their project. The component that provides communication between the dart code and the java/objective C is called a platform channel. On the android side we can use the registrar interface to hook into Android platform code.

[tobrun]

It seems we need some SDK API changes if we want to integrate correctly in the flutter widget ecosystem. We need to be able to set a SurfaceTexture, provided to us by flutter, and use that for rendering (instead of using own managed GLSurfaceView/TextureView).

If not we will be limited to only support full screen interactions or use an approach of rendering to a bitmap. More context in https://github.com/flutter/flutter/issues/73.

[tribuipi]

Hi all,

I've just managed to get Mapbox's MapView rendered as a "native" Flutter widget. My approach is:

• Write custom SurfaceTextureMapRenderer class to ask MapBox render itself to a provided SurfaceTexture. This class is a modified version of the TextureViewMapRenderer.
• Modify MapView to use this custom renderer
• Use Flutter Texture widget to render the backed SurfaceTexture

To control the map, we can implement in the Flutter plugin & widgets which will talk directly to the NativeMapView instead of MapView & MapboxMap as I did in this POC.

[tobrun]

@tribuipi that is looking great, that matches the idea I had as well. Ideally in the end, we have a plugin that wraps both Android and iOS that is build on top of a binary? Would you be able to create a PR with code from above? you should get contributions for your work ;)

[tribuipi]

Hi all,

I've just pushed the source code of the Flutter plugin & demo here: https://github.com/AgeOfMobile/flutter_mapbox

Notes: The demo just works on Android for now. It demonstrates the very basic map features:

• Render map as a native Flutter widget
• Simple pan & zoom

This plugin is built based on a modified version of Mapbox Android SDK 6.0.0-beta5 which I also pushed here for your reference: https://github.com/AgeOfMobile/mapbox-gl-native/tree/flutter_support

I did following modifications in the Android SDK:

• Remove the dependency on MapView from NativeMapView
• Expose the NativeMapView as a public class to allow developing custom map classes

With these modifications, I can develop a custom map renderer & a custom map control in the Flutter plugin code, not in the SDK.

I don't know this approach is correct, but at least it works for me now.

[tobrun]

@tribuipi thanks for contributing and providing the code.

I don't know this approach is correct.

Getting it to work is a great first step! Ideally we expose an API on the Android/iOS SDK in this repository (and not a modified fork). This is because of the need to keep the fork and this repo in sync. If we expose an API we only need to update the used dependency in the flutter plugin vs incrementally grow the maintenance with every release. Additionally we can also add some testing on the exposed API in our test suite in this repo.

[tobrun]

Remove the dependency on MapView from NativeMapView

This is great, love seeing the MapView being abstracted in an interface. in #11706 I'm doing the same but I refactored the code a bit to limit its exposed scope (see here).

Expose the NativeMapView as a public class to allow developing custom map classes

Instead of making it public we would prefer keeping the NativeMapView API internal. To create a custom view class, we will have to move FlutterMap to the exact package as NativeMapView.

[seddonm1]

great work guys. keen to help once we get FlutterMap and the core flutter code into the Mapbox-gl-native main repo.

[tobrun]

https://github.com/mapbox/mapbox-gl-native/pull/11706 landed as is testable as with 6.1.0-SNAPSHOT. This should remove the necessity of a custom mapbox-gl build. @tribuipi testing out your code and currently hitting the following issue when running the example app. Would you able to take a look at https://github.com/AgeOfMobile/flutter_mapbox/issues/1 ? Would love to upstream that code to a mapbox repository.

[tribui]

Thanks, @tobrun. It's a really great news. Now we don't need to build a custom version of SDK to support Flutter. I updated the plugin code to use the snapshot version of the Android SDK and fixed the crash bug when using the latest Flutter SDK.

[seddonm1]

got @tribui example code to run (after https://github.com/AgeOfMobile/flutter_mapbox/issues/2) great work! So is the plan to merge that code into the main mapbox-gl-native repo?

[tobrun]

@seddonm1 we will integrate flutter in the same way as we do with react-native:

• in a seperate repo
• using stable binary of mapbox-gl-native

@tribui thanks again for your work on this, I moved the code to a mapbox organisation repo:

• https://github.com/mapbox/flutter-mapbox-gl

Since we can track progress there I'm going to close this ticket.
Thank you all for chiming in and making this possible.

[yoavrofe]

I think it's worth noting also here that there's now an easier way to integrate a native view in flutter.
https://github.com/mapbox/flutter-mapbox-gl/issues/59

[lhorus]

Sorry for reviving this, but I'm curious as to where the mapbox team stands regarding this subject. Are there plans to create an official Flutter SDK?

[zugaldia]

@lhorus No worries - we're happy to see the enthusiasm for Flutter. Community-driven support for Mapbox Maps on Flutter is moving here https://github.com/tobrun/flutter-mapbox-gl. You can read more about it on https://github.com/mapbox/flutter-mapbox-gl/issues/75.