Get started with Flutter and MapLibre GL JS

In this tutorial, you’ll learn how to display a map on a mobile device using Flutter and MapLibre GL JS. Together, we will make a simple mobile fullscreen map application as 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. Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to protect the key before publishing your map app!

  6. Build your project 
     flutter run
  7. You will find your app on your virtual device (Emulator) or physical device.

Learn more

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

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.