Get started with Flutter and MapLibre GL JS

A quick way to start a mobile native map application with MapLibre GL JS using Flutter.

This simple mobile fullscreen map application is an example of how to use MapTiler maps together with Flutter and MapLibre GL JS for your native app.

We have made this app using the VS Code Flutter extension and the plugin flutter-maplibre-gl.

Installation and setting up

1. Install Flutter

2. Clone the Get started with Flutter and MapLibre GL JS repo

  git clone https://github.com/maptiler/get-started-flutter-maplibre-gl-js.git my-flutter-map

3. Navigate to the newly created project folder my-flutter-map

  cd my-flutter-map

4. Install dependencies

  flutter pub get

5. ⚠️ Open the lib/map.dart file and replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

ℹ️ If you don't have an API KEY you can create it for FREE at https://www.maptiler.com/cloud/

6. Build your project

  flutter run

7. You will find your app on your virtual device (Emulator) or physical device.

Resources

Here are a few resources to get you started if this is your first Flutter project:

• Install Flutter
• Lab: Write your first Flutter app
• Cookbook: Useful Flutter samples

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

For help with Flutter MapLibre view the online documentation.