Skip to content

Environment Setup - Flutter Examples

In this guide you will learn how to setup your environment to run the Flutter examples.

Create your account

First, create your Magic Lane account and get your API key token, see the Getting Started guide.

Install Flutter

Flutter Install

Working directory

Create the path

/home/$USER/MAGICLANE/

C:\MAGICLANE\

which will contain the SDK(s) and all your Magic Lane projects.
You can give this path a different name, but to avoid problems, the name should not contain spaces; in this documentation, this path will be referred to as shown.

Download examples

DOWNLOAD the Flutter examples ZIP file (or clone using git) and save it in the MAGICLANE/ directory

Maps SDK Examples for Flutter

after downloading the examples, you will have a file like this:

maps-sdk-examples-for-flutter-master.zip

Download the SDK

DOWNLOAD the Maps SDK for Flutter and save it in the MAGICLANE/ directory

Maps SDK for Flutter

Install 7zip

On Debian/Ubuntu flavors of linux, you can install 7-zip like this:

sudo apt install p7zip-full

DOWNLOAD AND INSTALL 7zip in the default directory, such as:

"C:\Program Files\7-Zip"

7zip

Add 7zip to the Path

This step is only for Windows, please skip this step if you are on Linux.

ADD the path where the 7z.exe binary executable is located to the system PATH:

Environment variables - example CPP screenshot

Go to the system Environment variables (click the start button and type env), and select the PATH variable. Click Edit, click New and add the 7z.exe binary path to the PATH environment variable, by pasting for example:

C:\Program Files\7-Zip

then click OK, OK, OK

Verify 7zip install

Start a new COMMAND PROMPT, and now typing

7z

and pressing enter should display the 7-zip options, to verify that 7zip was correctly installed and configured;

Windows note: this will only work in a command prompt started after the PATH environment variable was updated in the above step;

Command prompt in working directory

GO to the MAGICLANE directory:

cd
cd  MAGICLANE
C:
CD  \MAGICLANE

Extract the examples archive

EXTRACT the Flutter examples archive downloaded above using 7z.exe like this:

7z x maps-sdk-examples-for-flutter-master.zip

a directory containing the examples will be created:

maps-sdk-examples-for-flutter-master

Extract the SDK

EXTRACT the SDK archive downloaded above using 7z.exe like this: (replace the MAGICLANE*.tar.bz2 filename shown with the actual name of your MAGICLANE*.tar.bz2 file)

tar xvf MAGICLANE-MAPS-SDK-Flutter-*.tar.bz2

note that you can also use 7z on Linux, as shown in the Windows tab;

7z x MAGICLANE-MAPS-SDK-Flutter-*.tar.bz2

a tar archive file is extracted; now extract the tar archive like this:

7z x MAGICLANE-MAPS-SDK-Flutter-*.tar

a directory containing the SDK headers and lib files is created, with a name similar to this:

MAGICLANE-MAPS-SDK-Flutter-<version>

inside this directory is the Maps SDK for Flutter:

gem_kit

Update gem_kit dependencies

At the terminal command prompt, cd into the gem_kit project directory, where the pubspec.yaml file is located, and update the dependencies:

cd gem_kit

flutter pub get

cd ..

Move the SDK directory

MOVE the gem_kit directory into the plugins subdirectory of an example you wish to run, such as hello_map/plugins/

cd MAGICLANE-MAPS-SDK-Flutter*

mv gem_kit ../maps-sdk-examples-for-flutter-master/hello_map/plugins

cd MAGICLANE-MAPS-SDK-Flutter*

move gem_kit ..\maps-sdk-examples-for-flutter-master\hello_map\plugins

Build and run

Hello map - example flutter screenshot

Now that Flutter is installed, and you have both the gem_kit and hello_map directories in the maps-sdk-examples-for-flutter-master directory, cd to that directory and run the hello_map example like this:

cd ..\maps-sdk-examples-for-flutter-master

cd hello_map

Download project dependencies:

example flutter upgrade screenshot

flutter upgrade

example flutter clean screenshot

run the following terminal commands in the project directory, where the pubspec.yaml file is located:

flutter clean

example flutter pub get screenshot

flutter pub get

Run the example:

flutter run