mapbox_gl 0.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 46

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 pub:

$ pub get

with Flutter:

$ flutter pub get

Alternatively, your editor might support pub get or flutter pub 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';
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.

This package version is not analyzed, because it is more than two years old. Check the latest stable version for its analysis.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0