Flutter_map showing a black screen

I'm trying to use a map on my app, but i get a black screen instead of viewing the map.

I tried adding some marker to the map which show and can be manipulated, but where there should be the map is a black background instead.

My goal is to manage to show the map and navigate on it. I've already managed to show some elements on top on the map, but i cant get the map to display behind the elements. (i'm getting the same problem with or without the marker elements).

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:latlong2/latlong.dart';
import 'package:flutter_map/flutter_map.dart';

class MapScreen extends StatefulWidget {
  @override
  State<MapScreen> createState() => MapScreenState();
}

class MapScreenState extends State<MapScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            FlutterMap(
              mapController: MapController(),
              options: 
              MapOptions(
                center: LatLng(
                    28.9, -13.5), 
                zoom: 9.2,
                maxZoom: 12,
                minZoom: 2,
              ),
              layers: [
                TileLayerOptions(
                  minZoom: 1,
                  maxZoom: 18,
                  backgroundColor: Colors.black,
                  urlTemplate:
                      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                  subdomains: ['a', 'b', 'c'],
                ),
                MarkerLayerOptions(
                  markers: [
                    mapTag("Hello World", 51.5, -0.09),
                    mapTag("Arrecife", 28.9, -13.5),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

Marker mapTag(TagText, Lat, Long) {
  return Marker(
    width: 80.0,
    height: 80.0,
    point: LatLng(Lat, Long),
    builder: (ctx) => Container(
      child: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white),
              color: Colors.grey[800],
              borderRadius: BorderRadius.all(
                Radius.circular(20),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: Text(
              TagText,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white),
            ),
          ),
        ],
      ),
    ),
  );
}

enter image description here

Any idea why i'm getting a black screen and how to get the map to show?



Comments

Popular posts from this blog

Spring Elasticsearch Operations

Object oriented programming concepts (OOPs)

Network Error and Timeout on Authorize.net JS