1

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.

Suthura Sudharaka
  • 643
  • 10
  • 25

0 Answers0