A Mapbox GL flutter package for creating custom maps

admin

AndroidFlutter NewsiPhoneTechTechnology
Flutter Mapbox GL Native

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.

screenshot.png

Getting Started

Android

Following examples use Mapbox vector tiles, which require a Mapbox account and a Mapbox access token. Obtain a free access token on your Mapbox account page. After you get the key, place it in project’s Android directory:

  • Create a local.properties file with the following path: $project_dir/android/local.properties
  • Add mapbox.accessToken=”YOUR MAPBOX ACCESS TOKEN” token to the local.properties file.

Demo app

  • Install Flutter and validate its installation with flutter doctor
  • Clone this repository with git clone git@github.com:mapbox/flutter-mapbox-gl.git
  • Run the app with cd flutter_mapbox/example && flutter run

New project

  • Create new Flutter project in your IDE or via terminal
  • Add mapbox_gl: ^0.0.1 dependency to pubspec.yaml file and get the package
  • Add Mapbox read token value in the application manifest android/app/src/main/AndroidManifest.xml:
<manifest ...
  <application ...
    <meta-data android:name="com.mapbox.token" android:value="YOUR_TOKEN_HERE" />
  • Import Mapbox widgets and add them to your widget tree

import ‘package:mapbox_gl/mapbox_gl.dart’;

Credit (github url) : https://github.com/mapbox/flutter-mapbox-gl

Next Article : https://flutterappdev.com/2019/01/29/a-sample-for-creating-a-nice-movie-details-page-ui-in-flutter/

Leave a Comment

© 2025 Flutter App Dev