I am using google_maps_flutter: ^2.0.6
package in my application. Here I'm using a provider to load the markers in to my application.
Also I need to change the decoration image of the marker on tap. The problem is my ontap event is executing but the image does not change.
Below is the code for the google maps widget
Set<Marker> customMarkers = Set<Marker>();
@override
void initState() {
super.initState();
getMarkers();
}
void getMarkers() {
Future.delayed(const Duration(seconds: 2), () {
setState(() {
customMarkers =
Provider.of<MapProvider>(context, listen: false).getMarkers();
});
});
}
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
@override
Widget build(BuildContext context) {
var con = config.SizeConfig();
return Scaffold(
body: Container(
height: con.h(),
width: con.w(),
child: Stack(
children: [
GoogleMap(
zoomControlsEnabled: false,
mapType: MapType.normal,
onMapCreated: (controller) {
_onMapCreated(controller);
},
markers: customMarkers,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 14.0,
),
),
BackBtn(con: con),
TitleWidget(con: con),
BottomBtn(con: con),
],
),
),
);
}
Below is the provider I created
class MapProvider extends ChangeNotifier {
Set<Marker> customMarkers = Set<Marker>();
void generateMarkers(context) {
var con = config.SizeConfig();
var locations = [
LatLng(56.9570879, 24.1014793),
LatLng(56.9568659, 24.0961793),
LatLng(56.9546749, 24.0836303),
LatLng(56.9408639, 24.1005883),
LatLng(56.9420809, 24.0958893)
];
var markerListLength = 5;
Future.delayed(const Duration(seconds: 2), () {
var decorationImageDarkBlue = DecorationImage(
image: AssetImage('${Constants.IMAGE_PATH}icon-map-pin.png'),
fit: BoxFit.scaleDown);
var decorationImageGreen = DecorationImage(
image: AssetImage('${Constants.IMAGE_PATH}icon-map-pin-green.png'),
fit: BoxFit.scaleDown);
var decorationImageLightBlue = DecorationImage(
image:
AssetImage('${Constants.IMAGE_PATH}icon-map-pin-light-blue.png'),
fit: BoxFit.scaleDown);
var decorationImageBlack = DecorationImage(
image: AssetImage('${Constants.IMAGE_PATH}icon-map-pin-black.png'),
fit: BoxFit.scaleDown);
for (var i = 0; i < markerListLength; i++) {
var selected = i == 0
? decorationImageDarkBlue
: i == 1
? decorationImageGreen
: decorationImageLightBlue;
MarkerGenerator(
[
Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.all(con.initWidth(v1: 6)),
decoration: BoxDecoration(image: selected),
height: con.initHeight(v1: 40),
width: con.initWidth(v1: 30.47),
child: Container(
width: con.initWidth(v1: 18),
height: con.initWidth(v1: 18),
alignment: Alignment.center,
decoration:
BoxDecoration(color: kwhite, shape: BoxShape.circle),
child: CustomText(
fontColor: Color(0xFF1879D3),
fontSize: 12,
text: '$i')),
)
],
(bitmaps) {
customMarkers.add(Marker(
infoWindow: InfoWindow(title: "$i"),
markerId: new MarkerId("randomText$i"),
position: locations[i],
icon: BitmapDescriptor.fromBytes(bitmaps.first),
anchor: Offset(0.5, 0.5),
onTap: () {
print("marker on tap executed"); // this line prints
selected = decorationImageBlack; //this line isn't
notifyListeners();
}));
},
).generate(context);
}
});
}
Set<Marker> getMarkers() {
return customMarkers;
}
}
What can be the error here and how can I fix it.