How to spot different locations with colors on Map? - flutter

Question

Let me tell you what my motive is. I am making an app in which the locations which are highly affected by COVID is displayed by red, orange, and green colors. They are actually containers which are circular in shape and of these three colors.
But, I am not getting the output as I have created this.
Please see the code:-
import 'package:flutter/material.dart';
import 'package:latlong/latlong.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class MapIntegration extends StatefulWidget {
#override
_MapIntegrationState createState() => _MapIntegrationState();
}
class _MapIntegrationState extends State<MapIntegration> {
List redZoneData = new List();
List orangeZoneData = new List();
List greenZoneData = new List();
Map overallData = {
"Gujarat": LatLng(20.5937, 78.9629),
"Dehi": LatLng(20.5937, 78.9629)
};
int n = 2;
Map mapData;
var totalConfirmed;
var dataCalc;
var death;
var stateCode;
mapDataValue() async {
final url = 'https://api.rootnet.in/covid19-in/stats/latest';
final response = await http.get(url);
mapData = json.decode(response.body);
if (response.statusCode == 200) {
setState(() {
for (int index = 0;
index < mapData['data']['regional'].length;
index++) {
totalConfirmed = mapData['data']['regional'][index]['totalConfirmed'];
death = mapData['data']['regional'][index]['deaths'];
dataCalc = double.parse((totalConfirmed / death).toStringAsFixed(2));
stateCode = mapData['data']['regional'][index]['loc'];
if (dataCalc <= 40.00) {
redZoneData.add(stateCode);
} else {
// print(stateCode);
if (dataCalc > 40.00 && dataCalc <= 50.00) {
orangeZoneData.add(stateCode);
} else {
greenZoneData.add(stateCode);
}
}
}
print(redZoneData);
print(orangeZoneData);
print(greenZoneData);
});
} else {
throw Exception('loading failed...');
}
}
Widget dataEvaluation() {
var marker;
for (int index = 0; index < mapData['data']['regional'].length; index++) {
if (redZoneData.contains(mapData['data']['regional'][index]['loc'])) {
marker = new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(20.5937, 78.9629),
builder: (ctx) => new Container(
height: 10,
width: 10,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
),
);
} else if (orangeZoneData
.contains(mapData['data']['regional'][index]['loc'])) {
marker = new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(20.5937, 78.9629),
builder: (ctx) => new Container(
height: 10,
width: 10,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange,
),
),
);
} else if (greenZoneData
.contains(mapData['data']['regional'][index]['loc'])) {
marker = new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(20.5937, 78.9629),
builder: (ctx) => new Container(
height: 10,
width: 10,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
),
);
}
}
return marker;
}
#override
void initState() {
mapDataValue();
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height / 1.3,
child: Column(
children: [
Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(30.0),
),
height: MediaQuery.of(context).size.height / 1.5,
alignment: Alignment.centerRight,
child: FlutterMap(
options: new MapOptions(
center: LatLng(22.5937, 78.9629),
zoom: 4.3,
),
layers: [
new TileLayerOptions(
urlTemplate:
'https://api.mapbox.com/styles/v1/shivam7007/ckevbwl2u6ty11an4bfbicex7/tiles/256/{z}/{x}/{y}#2x?access_token=pk.eyJ1Ijoic2hpdmFtNzAwNyIsImEiOiJja2VsMzRrcmcweW9vMnlwaXNiMzFrYjV2In0.CVRHP4CkMz_5UybuZ3CaIA',
additionalOptions: {
'acessToken':
'pk.eyJ1Ijoic2hpdmFtNzAwNyIsImEiOiJja2V0bXl4OXIxbmRrMnRvZWdkaWM5a29zIn0.doc-sYseA4b-Z7ylnp0Ttg',
'id': 'mapbox.mapbox-streets-v8',
},
),
new MarkerLayerOptions(
markers: [
dataEvaluation(),
],
),
],
),
),
Text('$dataCalc'),
],
),
);
}
}
And calling dataEvaluation() in MarkerLayerOption widget throws an error called "The element type 'Widget' can't be assigned to the list type 'Marker'."
Actually I have created a function calling dataEvaluation() which will calculate whether the STATE is present in the red, orange, or green zone, and according to that it will return the container based on the color red, orange, or gree, and that container will work as a spot on the map.
Please solve this, if you are finding any difficulty in understanding the question then please let me know. But please solve this. I am stuck finding nowhere.
API is = https://api.rootnet.in/covid19-in/stats/latest

Answer 1

I found this. It is easy as flutter provides you to write the single line code in the Widgets, so you can easily do the same.
for (var index in mapDataFinal)
if (redZoneData.contains(index))
new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(26.8467, 80.9462),
builder: (ctx) => new Container(
height: 10,
width: 10,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
),
)
Don't need to put curly braces over there.
Full Code is here:
new MarkerLayerOptions(markers: [
for (var index in mapDataFinal)
if (redZoneData.contains(index))
new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(26.8467, 80.9462),
builder: (ctx) => new Container(
height: 10,
width: 10,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
),
)
else if (orangeZoneData.contains(index))
new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(10.8505, 76.2711),
builder: (ctx) => new Container(
height: 10,
width: 10,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange,
),
),
)
else if (greenZoneData.contains(index))
new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(22.2587, 71.1924),
builder: (ctx) => new Container(
height: 10,
width: 10,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
),
)
]),