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),
),
),
],
),
),
);
}
Any idea why i'm getting a black screen and how to get the map to show?
Comments
Post a Comment