Blank Map when creating map with Mapbox_Maps_Flutter

Custom Code

I am trying to create a custom widget using the Mapbox_Maps_Flutter package but whenever I test the app the map just shows the scale and the mapbox logo on a white map. The code I currently have is below:

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/enums/enums.dart';
import '/actions/actions.dart' as action_blocks;
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'dart:developer';

import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart' as mb;
import 'package:latlong2/latlong.dart' as ll;

class MapboxMap extends StatefulWidget {
  const MapboxMap({
    super.key,
    this.width,
    this.height,
    this.point,
    required this.startingPoint,
    required this.startingZoom,
    required this.accessToken,
  });

  final double? width;
  final double? height;
  final LatLng? point;
  final LatLng startingPoint;
  final double startingZoom;
  final String accessToken;

  @override
  State<MapboxMap> createState() => _MapboxMapState();
}

class _MapboxMapState extends State<MapboxMap> {
  mb.MapboxMap? mapboxMap;

  _onMapCreated(mb.MapboxMap mapboxMap) {
    this.mapboxMap = mapboxMap;
    log('Map created successfully');
  }

  @override
  Widget build(BuildContext context) {
    log('Building map with starting point: ${widget.startingPoint}, zoom: ${widget.startingZoom}');
    return Scaffold(
      body: mb.MapWidget(
        key: ValueKey("mapWidget"),
        onMapCreated: _onMapCreated,
        styleUri: 'mapbox://styles/ravenknobit/cltjnprwj00mw01qpgclec0ky',
        cameraOptions: mb.CameraOptions(
          center: mb.Point(
            coordinates: mb.Position(
                widget.startingPoint.latitude, widget.startingPoint.longitude),
          ),
          zoom: widget.startingZoom,
        ),
      ),
    );
  }
}
What have you tried so far?
Did you check FlutterFlow's Documentation for this topic?
No
2
6 replies