We’ve just released a plugin that adds experimental Mapbox Maps support to Flutter. Embed interactive and customizable maps inside a Flutter widget with just a few lines of code. Add one of our designer map styles or create your own in Studio and reference it in your app using the plugin.

To install the Flutter plugin follow the instructions on https://pub.dartlang.org/packages/mapbox_gl. The source code is available at https://github.com/mapbox/flutter-mapbox-gl where you can find additional documentation and examples to get you started.

Add a map

To embed an interactive map in your Flutter widget, add a MapboxOverlay as a child. For example, the following snippet will add a map with a Dark style centered at the coordinates specified in target:

child: new MapboxOverlay(
  controller: new MapboxOverlayController(),
  options: new MapboxMapOptions(
    style: Style.dark,
    camera: new CameraPosition(
      target: new LatLng(lat: 52.376316, lng: 4.897801),
      zoom: 15.0,
      bearing: 0.0,
      tilt: 0.0),
    ),
  )
 

The map integrates correctly with other UI flutter components. In this example you can see how the map can be included in a tabbed view with three tabs.

The plugin also includes API support to convert from the Flutter local screen coordinates (the x,y coordinates where the user taps on the screen) to latitude and longitude values on the map.

Make your map interactive

The plugin comes with a demo app that showcases some of the interactions you can build with the plugin today. See it in action:

‍

‍

Please note that this is an experimental plugin meant for gathering early feedback from the Flutter community. It only supports Android for now, but we plan to add new features in the coming weeks. We welcome and encourage contributions in the GitHub repo.

Look for us at Google I/O

Like every year, we’ll be attending Google I/O to hangout and enjoy all the announcements. Ping Dan or Pablo if you have any questions about the Flutter plugin or if you simply want to chat about our developer platform for maps and location services.