mapbox_gl 0.0.1

  • Example
  • Installing
  • Versions
  • 90

Flutter Mapbox GL Native #

Please note that this project is experimental and is not officially supported. We welcome feedback and contributions.

This Flutter plugin for mapbox-gl-native enables embedded interactive and customizable vector maps inside of a Flutter widget. This project plugin is in early development stage. Only Android is supported for now.


Getting Started #

Android #

This demo app uses Mapbox vector tiles, which require a Mapbox account and a Mapbox access token. Obtain a free access token on your Mapbox account page.

  • Install Flutter and validate its installation with flutter doctor
  • Clone this repository with git clone
  • Create a file with the following path: flutter_mapbox/example/android/
  • Add mapbox.accessToken="YOUR MAPBOX ACCESS TOKEN" token to the file.
  • Run the app with cd flutter_mapbox/example && flutter run

Documentation #

This README file currently houses all of the documentation for this Flutter project. Please visit if you'd like more information about the Mapbox Maps SDK for Android and for more information about the Mapbox Maps SDK for iOS.

Getting Help #

  • Need help with your code?: Look for previous questions on the #mapbox tag — or ask a new question.
  • Have a bug to report? Open an issue. If possible, include a full log and information which shows the issue.
  • Have a feature request? Open an issue. Tell us what the feature should do and why you want the feature.

Sample code #

This repository's example library is currently the best place for you to find reference code for this project.

Contributing #

We welcome contributions to this repository!

If you're interested in helping build this Mapbox/Flutter integration, please read the contribution guide to learn how to get started.

Changelog for the Flutter Mapbox GL #

Mapbox welcomes participation and contributions from everyone. If you'd like to do so please see the Contributing Guide first to get started.

0.0.1 - May 7, 2018 #

  • Initial Android proof of concept
  • Fix hot-reload issue #15
  • Add camera animation functions #18
  • Add experimental note to #26
  • Add min/max zoomlevel API #27
  • Add overview screen to example application #29
  • Bugfix on easeTo, update examples #31
  • Add Style API #32
  • Add improved, add contributing file #33
  • Add Projection API #36
  • Fix pixelated/overzoomed map #40


import 'dart:async';

import 'package:flutter/material.dart';
import 'flutter_animation.dart';
import 'flutter_list.dart';
import 'flutter_tabbar.dart';
import 'mapbox_camera.dart';
import 'mapbox_minmaxzoomlevel.dart';
import 'mapbox_style.dart';
import 'mapbox_projection.dart';

Future<Null> main() async {
  runApp(new MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new OverviewScreen(),

// shows an expandable list of examples
class OverviewScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text('Flutter Mapbox GL'),
      body: new ListView.builder(
        itemBuilder: (BuildContext context, int index) =>
            new EntryItem(data[index], context),
        itemCount: data.length,

final List<Entry> data = <Entry>[
  new ExpansionEntry(
    'Mapbox API',
      new ScreenEntry('Camera Animations', new CameraDemo()),
      new ScreenEntry('Min/Max Zoom Levels', new MinMaxZoomLevelDemo()),
      new ScreenEntry('Style API', new StyleDemo()),
      new ScreenEntry('Projection', new ProjectionDemo())
  new ExpansionEntry(
    'Flutter integration',
      new ScreenEntry('Animation', new AnimationDemo()),
      new ScreenEntry('List integration', new ListDemo()),
      new ScreenEntry('Tabs integration', new TabBarDemo()),

abstract class Entry {

  final String title;

class ScreenEntry extends Entry {
  ScreenEntry(String title, this.screen) : super(title);

  final Widget screen;

class ExpansionEntry extends Entry {
  ExpansionEntry(String title, this.children) : super(title);

  final List<Entry> children;

class EntryItem extends StatelessWidget {
  const EntryItem(this.entry, this.context);

  final Entry entry;
  final BuildContext context;

  Widget _buildTiles(Entry root) {
    if (root is ScreenEntry) {
      return new ListTile(
          title: new Text(root.title),
          onTap: () {
              new MaterialPageRoute(builder: (context) => root.screen),
    } else {
      return new ExpansionTile(
        key: new PageStorageKey<Entry>(root),
        title: new Text(root.title),
        children: (root as ExpansionEntry),

  Widget build(BuildContext context) {
    return _buildTiles(entry);

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  mapbox_gl: ^0.0.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:mapbox_gl/controller.dart';
import 'package:mapbox_gl/flutter_mapbox.dart';
import 'package:mapbox_gl/overlay.dart';
Version Uploaded Documentation Archive
0.0.3 Mar 30, 2019 Go to the documentation of mapbox_gl 0.0.3 Download mapbox_gl 0.0.3 archive
0.0.2 Mar 23, 2019 Go to the documentation of mapbox_gl 0.0.2 Download mapbox_gl 0.0.2 archive
0.0.1 May 7, 2018 Go to the documentation of mapbox_gl 0.0.1 Download mapbox_gl 0.0.1 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on May 8, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.0
  • pana: 0.12.15
  • Flutter: 1.5.8


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-0.55 points)

65 out of 66 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/controller.dart.

Run flutter format to format lib/controller.dart.

Format lib/overlay.dart.

Run flutter format to format lib/overlay.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Package is getting outdated. (-0.27 points)

The package was last published 52 weeks ago.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8