arcgis maps in flutter - flutter

Question

I am trying to put an arcgis WMTS tile layer on top of openstreetmaps WMTS layer in flutter using the flutter_map plugin.
Here is my code :
Widget build(BuildContext context) {
return MaterialApp(
home: FlutterMap(
options: new MapOptions(
center: LatLng(33.8, 9.5),
zoom: 6.0,
pinchZoomWinGestures: MultiFingerGesture.pinchZoom,
),
layers: [
//layer 1 - leaflet tiles
TileLayerOptions(
urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
subdomains: ['a', 'b', 'c'],
tileProvider: NonCachingNetworkTileProvider(),
backgroundColor: Colors.black,
),
//Layer 2 - leaflet tiles
TileLayerOptions(
urlTemplate:
"https://tiles.arcgis.com/tiles/C8EMgrsFcRFL6LrL/arcgis/rest/services/GEBCO_contours/MapServer/tile/{z}/{x}/{y}",
subdomains: ['a', 'b', 'c'],
tileProvider: NonCachingNetworkTileProvider(),
backgroundColor: Colors.transparent,
),
],
),
);
but the arcgis map does not align correctly with the openstreetmap.
as shown in the scrrenshot
I hope you can help me rectify my code and have a great day

Answer 1

I've faced something like this before. I was putting ArcGIS tile on top of Mapbox, and the result was like you described.
Probably the axes differ a little if the layers are made by Esri products.
And for this case, I only have 2 solutions for you :
1 - Use ArcGIS Pro or any ArcGIS tool and try shifting the layers till they fit the OpenStreetMap.
2 - Instead of using OpenStreetMap, use ArcGIS APIs, but you have to add some native code for iOS and Android, and check pub.dev for ArcGIS libraries.

Answer 2

I also have faced the similar issue with the ArcGIS map - it is not aligning correctly in the screen. The below pattern ({z}/{y}/{x}) renders the esri tiles correctly on the screen.
https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}