2022-11-27

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?



No comments:

Post a Comment