From lat lon zoom to x y

Question

I'm trying to implement a code in dart(flutter) that transforms the lon lat coordinates into x y coordinates of an image without success.

The image is downloaded from openstreetmap and of dimensions: width, height and of which I know the central coordinates (lat, lon) and the zoom.

This is because I would like to place an icon on the map at specific lon lat coordinates.

I tried to implement like this but the x y coordinates in the image don't correspond to the lat lon coordinates except for the center. this first try is based on this https://learn.microsoft.com/en-us/azure/azure-maps/zoom-levels-and-tile-grid?tabs=csharp

Point latLonToPixel(double lat, double lon, double latCenter,
    double lonCenter, double width, double height, double zoom) {
  // Calculate the scale factor based on the zoom level
  num scaleFactor = pow(2, zoom);

  // Calculate the number of pixels per degree of latitude and longitude based on the scale factor
  double pixelsPerLat = height * scaleFactor ;
  double pixelsPerLon = width * scaleFactor ;

  // Calculate the pixel coordinates of the central point
  double xCenter = width / 2;
  double yCenter = height / 2;

  
  double sinLatitude = sin(lat * pi/180);
  double latPoint = (0.5 - log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * pi));
  double lonPoint = ((lon + 180) / 360);

  double sinLatitudeCenter = sin(latCenter * pi/180);
  double latPointCenter = (0.5 - log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * pi));
  double lonPointCenter = ((lonCenter + 180) / 360);


  // Calculate the pixel coordinates of the given point relative to the central point
  double xPoint = xCenter + (lonPoint - lonPointCenter) * pixelsPerLon;
  double yPoint = yCenter + (latPoint - latPointCenter) * pixelsPerLat;

  print(" xPoint: ${xPoint}, yPoint: ${yPoint}");

  return Point(xPoint, yPoint);
}

this is a second attempt based on this https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames but still unsuccessful

Point latLonToPixel18(double lat, double lon, double latCenter,
    double lonCenter, double width, double height, double zoom) {
  // Calculate the scale factor based on the zoom level
  num scaleFactor = pow(2, zoom);

  // Calculate the number of pixels per degree of latitude and longitude based on the scale factor
  double pixelsPerLat = height * scaleFactor;
  double pixelsPerLon = width * scaleFactor;

  // Calculate the pixel coordinates of the central point
  double xCenter = width / 2;
  double yCenter = height / 2;


  double latPointRad = radians(lat);
  double latPoint = (1.0 - asinh(tan(latPointRad)) / pi) / 2.0;
  double lonPoint = ((lon + 180) / 360);

  double latCenterRad = radians(latCenter);
  double latPointCenter = (1.0 - asinh(tan(latCenterRad)) / pi) / 2.0;
  double lonPointCenter = ((lonCenter + 180) / 360);

  // Calculate the pixel coordinates of the given point relative to the central point
  double xPoint = xCenter + (lonPoint - lonPointCenter) * pixelsPerLon;
  double yPoint = yCenter + (latPoint - latPointCenter) * pixelsPerLat;

  print(" xPoint: ${xPoint}, yPoint: ${yPoint}");

  return Point(xPoint, yPoint);
}

my Scaffold

Scaffold(
          body: Center(
            child: Container(
              child: InteractiveViewer(
                panEnabled: true, // Set it to false
                //boundaryMargin: EdgeInsets.all(100),
                minScale: 1,
                maxScale: 10,

                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      'assets/images/map.png',
                      width: width,
                      height: height,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      left: xPoint,
                      top: yPoint,
                      child: Icon(
                        Icons.gps_fixed,
                        size: 10,
                        color: Color.fromRGBO(0, 0, 0, 1),
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),