Why dart objects are modified when the associated variables are modified? - flutter

Question

I want to display markers on a Flutter Map ('package:flutter_map/flutter_map.dart')
But all map markers take the same parameters when I add one.
When the user clicks on the map, a popup opens with fields to define the attributes of the marker.
These fields values are associated to class variables.
Is it because the Marker builder uses the pointers of the primitive variables and not their values?
Or it's because Dart understands primitive types as objects?
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:positioned_tap_detector_2/positioned_tap_detector_2.dart';
///
/// Widget that allows display intervention
///
class DisplayIntervention extends StatefulWidget {
const DisplayIntervention({Key? key}) : super(key: key);
#override
_DisplayInterventionState createState() => _DisplayInterventionState();
}
class _DisplayInterventionState extends State<DisplayIntervention> {
// Initialize map controller
late final MapController mapController;
// Size of the left panel
final int leftPaneProportion = 20;
// Map settings
List<Marker> map_markers = [];
List<Map> availableColors = [
{'name': 'Red', 'value': Colors.red},
{'name': 'Green', 'value': Colors.green},
{'name': 'Blue', 'value': Colors.blue},
{'name': 'Black', 'value': Colors.black},
];
// Map capture (start capture many points)
bool mapCapture = false;
// History of taps
List<LatLng> tapHistory = [];
// ---- END DRAWER SECTION ----- //
// ---- START NEW MARKER SECTION ----- //
final _markerFormKey = GlobalKey<FormState>();
String _markerLabelController = "";
IconData _markerTypeController = Icons.directions_car;
int _markerRotationController = 0;
double _markerSizeController = 30.0;
Color _markerColorController = Colors.red;
List<Map> availableVehicles = [
{'name': 'Car', 'value': Icons.directions_car},
{'name': 'Truck', 'value': Icons.local_shipping},
];
// ---- END NEW MARKER SECTION ----- //
#override
void initState() {
super.initState();
mapController = MapController();
}
void _handleTap(TapPosition tapPosition, LatLng latlng) {
tapHistory.add(latlng);
openMarkerPopup();
}
void computeMarker(){
print("Add new marker");
map_markers.add(
Marker(
width: _markerSizeController,
height: _markerSizeController,
point: tapHistory.last,
builder: (ctx) =>
Container(
child: Icon(_markerTypeController, color: _markerColorController, size: _markerSizeController),
),
));
setState(() {
map_markers;
});
}
openMarkerPopup(){
showDialog(context: context, builder: (BuildContext context) {
return AlertDialog(
scrollable: true,
title: Text('Add marker'),
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
key: _markerFormKey,
child: Column(
children: <Widget>[
TextFormField(
initialValue: _markerLabelController,
onChanged: (value) {
_markerLabelController = value;
},
decoration: const InputDecoration(
labelText: 'Label',
icon: Icon(Icons.abc_rounded),
),
),
DropdownButtonFormField(
decoration: const InputDecoration(
icon: Icon(Icons.border_color),
),
value: _markerTypeController,
items: availableVehicles.map((map) {
return DropdownMenuItem(
child: Text(map['name']),
value: map['value'],
);
}).toList(),
onChanged: (value) {
setState(() {
if (value != null){
_markerTypeController = value as IconData;
}
});
},
),
DropdownButtonFormField(
decoration: const InputDecoration(
icon: Icon(Icons.brush_rounded),
),
value: _markerColorController,
items: availableColors.map((map) {
return DropdownMenuItem(
child: Text(map['name']),
value: map['value'],
);
}).toList(),
onChanged: (value) {
setState(() {
if (value != null){
_markerColorController = value as Color;
}
});
},
),
TextFormField(
initialValue: _markerSizeController.toString(),
keyboardType: TextInputType.number,
onChanged: (value) {
_markerSizeController = double.parse(value);
},
decoration: const InputDecoration(
labelText: 'Size',
icon: Icon(Icons.expand_more),
),
),
TextFormField(
initialValue: _markerRotationController.toString(),
keyboardType: TextInputType.number,
onChanged: (value) {
_markerRotationController = int.parse(value);
},
decoration: const InputDecoration(
labelText: 'Angle',
icon: Icon(Icons.zoom_in_rounded),
),
)
],
),
),
),
actions: [
ElevatedButton(
child: Text("Back"),
onPressed: () {
Navigator.of(context).pop();
}),
ElevatedButton(
child: Text("Valid"),
onPressed: () {
computeMarker();
Navigator.of(context).pop();
}),
],
);
});
}
#override
Widget build(BuildContext context) {
return Flex(
direction: Axis.horizontal,
children: [
Flexible(
flex: leftPaneProportion,
child: Container(
color: Colors.white,
child: Scaffold(
resizeToAvoidBottomInset: true,
body: ListView(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
children: const <Widget>[
Card(
child: ListTile(
title: Text("Debug"),
trailing: Icon(
Icons.arrow_circle_right_outlined))),
],
))),
),
Flexible(
flex: 100 - leftPaneProportion,
child: FlutterMap(
mapController: mapController,
options: MapOptions(
center: LatLng(48.117266, -1.6777926),
zoom: 10,
onTap: _handleTap
),
layers: [
MarkerLayerOptions(
markers: map_markers
),
],
children: <Widget>[
TileLayerWidget(
options: TileLayerOptions(
urlTemplate:
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c'],
),
),
],
),
),
],
);
}
}

Answer 1

The problem came from the marker builder
By giving directly the global variable the builder uses the pointer.
While by passing the value via an intermediate variable the problem is solved.