MapBox Flutter

This repository contains code corresponding to the Youtube video – https://youtu.be/ashk0mYLx9c
If you loved this work then you can support me by liking and sharing the video, and starring this repository! ?

? So what is this app now?

MapBox Flutter demonstrates an implementation of MapBox in a Flutter application, along with its Maps and Navigation SDKs. We will do this by building a simple project involving a hungry you on a bicycle and a set of restaurants and cafes! ?

??‍? Where are the instructions to get the app up and running?

Well open your browser and IDE, we have got a few things to do! Follow along as we get the app up and running.

  1. Head to https://account.mapbox.com and create a new account. Then go to your account page. You will see a public access token. This is something we will need later.

Screenshot 2022-02-11 at 9 03 04 PM

  1. In the same page click on Create a token and in the next page, add a new secret token. Make sure that the DOWNLOADS:READ permission is checked here. After you create the token, you must copy it somewhere else because you can only see this once.

Screenshot 2022-02-11 at 9 04 50 PM

  1. Now that you have both the tokens, you just need to replace them in appropriate places of the project code. Open the starter_code/mapbox_navigation folder and look for YOUR_PUBLIC_ACCESS_TOKEN and YOUR_SECRET_TOKEN in the entire project. Replace them with the tokens gotten in Step 1 and 2 respectively. To double check you can make sure that –
    • For ios: You must have put public token in Runner/Info.plist file.
    • Some android: You must have put public token as a string in app/src/main/res/values/strings.xml and secret token as a string in gradle.properties file.
  2. To run the app in an IOS device/emulator, you will need 1 more step. Open or create .netrc file in your home directory. In there add the following lines:

machine api.mapbox.com
  login mapbox
  password <YOUR_SECRET_TOKEN>
  1. Finally open your assets folder and add a config/.env file. You can add one key-value pair there:
MAPBOX_ACCESS_TOKEN="<YOUR_PUBLIC_ACCESS_TOKEN>"

That’s it. You follow these 5 steps and you should be good to go. Now I would also recommend going through the documentation for Android and iOS, because there is a lot more to it, like adding permissions and stuff, which I have already done for you.

GitHub

View Github