> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/flutter/maps/llms.txt)

# Get Started v3

The Mapbox Maps SDK for Flutter v3 brings web support alongside iOS and Android, letting you ship the same Flutter map code to all three platforms. Before starting to develop your application, you'll need to configure your credentials and add the SDK as a dependency to your Flutter project.

Maps SDK for Flutter v3 is an MVP release. All v2 features are fully available on iOS and Android, but the web platform is still working toward feature parity.

## Configure credentials

The SDK requires a public access token from your Mapbox account to access Mapbox services. If you don't already have one, follow the [access tokens guide](https://docs.mapbox.com/help/dive-deeper/access-tokens/) to create or copy a public token from your account.

You should not expose this access token in publicly-accessible source code where unauthorized users might find it. Instead, you should store it somewhere safe on your computer and make sure it is only added when your app is compiled.

### Configure your Mapbox access token

It's a good practice to retrieve your Mapbox access token from some external source. You can then pass your token to the environment when building, running, or launching the Flutter app.

You can pass the public access token in using the `--dart-define` flag when running `flutter build` or `flutter run` on the command line:

```bash
$ flutter build <platform> --dart-define=ACCESS_TOKEN=YOUR_PUBLIC_MAPBOX_ACCESS_TOKEN
```

```bash
$ flutter run --dart-define=ACCESS_TOKEN=YOUR_PUBLIC_MAPBOX_ACCESS_TOKEN
```

If you are using Visual Studio Code, you can configure `launch.json` to add the `--dart-define` argument so it is included each time the app is launched.

```json
{
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "args": [
        "--dart-define",
        "ACCESS_TOKEN=YOUR_PUBLIC_MAPBOX_ACCESS_TOKEN"
      ]
    }
  ]
}
```

Then, retrieve the token from the environment in the application and set it via `MapboxOptions`:

```dart
...
String accessToken = String.fromEnvironment("ACCESS_TOKEN");
MapboxOptions.setAccessToken(accessToken);
...
```

## Add the dependency

To use the Maps SDK for Flutter v3, add the dependency to the `pubspec.yaml`:

```yaml
...
dependencies:
  mapbox_maps_flutter: ^3.0.0-alpha.28
...
```

Then fetch the package:

```bash
$ flutter pub get
```

> **Related content (guide): [Install Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/install/)**
> 
> Learn how Mapbox GL JS is loaded in the browser, including CSP and bundling considerations that also apply to the web build of Maps SDK for Flutter v3.

## Add a map

Import the `mapbox_maps_flutter` library and add a `MapWidget`. The same widget renders on iOS, Android, and web:

```dart
import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Pass your access token to MapboxOptions so you can load a map
  String accessToken = const String.fromEnvironment("ACCESS_TOKEN");
  MapboxOptions.setAccessToken(accessToken);

  // Define the initial viewport for the map
  final viewport = CameraViewportState(
    center: Point(coordinates: Position(-98.0, 39.5)),
    zoom: 2,
    bearing: 0,
    pitch: 0,
  );

  runApp(MaterialApp(home: MapWidget(
    viewport: viewport,
  )));
}
```

Launch your app on iOS, Android, or in a browser, and you'll see a full-screen globe centered on North America. You can move and zoom the map using touch gestures on mobile or mouse and trackpad gestures on web. As a next step, consider adding [Markers and Annotations](https://docs.mapbox.com/flutter/maps/guides/markers-and-annotations/) or changing the [map style](https://docs.mapbox.com/flutter/maps/guides/styles/).

![Simple map globe view on an iOS device](https://docs.mapbox.com/assets/ideal-img/maps-install-flutter-iOS.cf51e4c.480.png)

iOS

![Simple map globe view on an Android device](https://docs.mapbox.com/assets/ideal-img/maps-install-flutter-Android.ee4df1f.480.png)

Android

![Mapbox map globe view running in a web browser](https://docs.mapbox.com/assets/ideal-img/maps-install-flutter-web.5b4089b.480.png)

Web