Flutter Flow: MapBox SDK with custom markers

You can easily add the Flutter Map Box SDK with custom markers. Start with the official documentation, create an account, and create a public access token.

Get Started | Maps SDK for Flutter | Mapbox Docs

First create a new custom widget in Flutter Flow and create the following parameters.

I’ve named my custom widget MapBox.

Then add the following code to load images:

import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
import 'dart:ui' as ui;
import 'dart:async';
import 'dart:typed_data';

 MapboxMap? mapboxMap;
 PointAnnotationManager? pointAnnotationManager;
 PointAnnotation? selectedAnnotation;
 PlaceStruct? selectedPlace;

 Future<Uint8List?> loadImage(String path) async {
    if (path.toLowerCase().startsWith('http')) {
      return await loadNetworkImage(path);
    } else {
      return await loadAssetImage(path);
    }
  }

  Future<Uint8List?> loadNetworkImage(String path) async {
    final completer = Completer<ImageInfo>();
    var image = NetworkImage(path);
    image.resolve(const ImageConfiguration()).addListener(ImageStreamListener(
        (ImageInfo…