[google_maps_flutter] [iOS] Stop Animation of Marker when it changed #129826
Comments
|
Hi @izzabellerina. Thanks for filing this issue. Can you upgrade to the latest versions of flutter to confirm if this issue persists? If it does, kindly provide a minimal complete reproducible code sample that doesn’t include 3rd party plugins or complex production code. Also, provide a video of the expected behaviour (as is on Android) |
dam-ease
added
the
waiting for customer response
|
@dam-ease thank you for waiting for me to reply to you late. |
github-actions
bot
removed
the
waiting for customer response
|
this is flutter doctor [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.2) [✓] VS Code (version 1.80.0) [✓] Connected device (2 available) [✓] Network resources |
|
@dam-ease and the last answer from "kindly provide a minimal complete reproducible code sample that doesn’t include 3rd party plugins" that I didn't use 3rd party to do that, I use the List of Latlng and then use the animation builder and play along with the list of the Latlng that you see the marker arrow run together with the line. |
|
Hi @izzabellerina. Thanks for the information. I can see the difference in the behaviour from the two videos provided. However, for this issue to be workable we'd need a minimal complete reproducible code sample that doesn’t include 3rd party plugins. |
dam-ease
added
the
waiting for customer response
|
@dam-ease Hi, So thank you for your response to my issue and you look after me so good. So ,this is my code example that is minimal I think. import 'dart:math';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class TestMapPage extends StatefulWidget {
const TestMapPage({super.key});
@override
State<TestMapPage> createState() => _TestMapPageState();
}
class _TestMapPageState extends State<TestMapPage> {
final _latLngTest = [
LatLng(13.963619731809006, 100.54022929519421),
LatLng(13.98241707374835, 100.5771468713398),
LatLng(13.995177221145711, 100.54530609440386),
LatLng(14.026573260690487, 100.47528663375181),
LatLng(14.04755056070953, 100.63118545608093),
];
Marker? _markerTest;
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
final random = Random().nextInt(5);
debugPrint(random.toString());
_markerTest = Marker(
markerId: MarkerId("TEST"),
icon: BitmapDescriptor.defaultMarker,
position: _latLngTest[random]);
setState(() {});
},
child: Icon(
Icons.location_on,
color: Colors.white,
)),
body: Stack(
children: [
GoogleMap(
onTap: (position) {},
onCameraMove: (position) async {},
onMapCreated: (control) {
// control.moveCamera();
},
initialCameraPosition:
CameraPosition(zoom: 15, target: _latLngTest.first),
markers: {_markerTest ?? Marker(markerId: MarkerId("TEST"))},
),
],
),
);
}
} |
github-actions
bot
removed
the
waiting for customer response
|
@dam-ease And this is my expectation that could be from android 711284465.245764.mp4and this is from ios done 711284465.333209.mp4 |
|
Hi @izzabellerina. Thanks for your patience and the detailed explanation. I am able to reproduce this issue on the latest Code Sample
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() async {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<int> items = List<int>.generate(100, (int index) => index);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Widget test',
theme: ThemeData(useMaterial3: true),
home: TestMapPage());
}
}
class TestMapPage extends StatefulWidget {
const TestMapPage({super.key});
@override
State<TestMapPage> createState() => _TestMapPageState();
}
class _TestMapPageState extends State<TestMapPage> {
final _latLngTest = [
LatLng(13.963619731809006, 100.54022929519421),
LatLng(13.98241707374835, 100.5771468713398),
LatLng(13.995177221145711, 100.54530609440386),
LatLng(14.026573260690487, 100.47528663375181),
LatLng(14.04755056070953, 100.63118545608093),
];
Marker? _markerTest;
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
final random = Random().nextInt(5);
debugPrint(random.toString());
_markerTest = Marker(
markerId: MarkerId("TEST"),
icon: BitmapDescriptor.defaultMarker,
position: _latLngTest[random]);
setState(() {});
},
child: Icon(
Icons.location_on,
color: Colors.white,
)),
body: Stack(
children: [
GoogleMap(
onTap: (position) {},
onCameraMove: (position) async {},
onMapCreated: (control) {
// control.moveCamera();
},
initialCameraPosition:
CameraPosition(zoom: 10, target: _latLngTest.first),
markers: {_markerTest ?? Marker(markerId: MarkerId("TEST"))},
),
],
),
);
}
}
Video
Screen.Recording.2023-07-18.at.09.04.10.movflutter doctor -v
|
dam-ease
changed the title
dam-ease
added
platform-ios
|
Thank you so much @dam-ease to help me with this issue. So, after this, in summary, Do have to change the flutter to the newest, right? or the Google map flutter version? and what the version number is? |
stuartmorgan
changed the title
|
It's unlikely that this is something the plugin is doing, so this may just be a difference in the SDKs. We'll need to see if this is even controllable on iOS. |
flutter-triage-bot
bot
removed
fyi-ecosystem
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
|
I've encountered this issue as well, I'll provide some further insights into this. It seems like this animation "feature" is coming from the Google Maps iOS SDK, see the documentation of the I couldn't find anything about the ability to disable the animation. Additionally to playing an unexpected animation, it can make things lag quite a bit too in some use cases: I had a marker showing a location on a GPS track, and the user was able to move the GPS track progress with a slider, resulting in a potential 60 times per second marker update. On Android this was working fine, but on iOS the marker animations seemed to queue up, and if I moved the slider around for long enough, the marker could keep animating for several seconds after I stopped moving the slider. Although it's not a clean fix, I found a workaround, so I'll share it here in case it helps others: in short, keep changing the marker ID, so that the SDK sees this as a marker removal + marker addition, instead of a marker update. It seems like on iOS, there is simply no way to update an existing marker's location without animating it, but I might have missed something. Looping back to the code snippet shared earlier, you can replace this: with that: This will essentially tell the SDK that each time your marker moves, it's a brand new marker (new ID), instead of simply updating its location. Note that this might have a performance impact, I haven't measured it, but I'm not aware of another workaround at the moment. |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
I'm too expecting a fix for this strange behavior in iOS! |
Is there an existing issue for this?
Steps to reproduce
Expected results
I want to stop animating the marker when it changed, I don't know what to do because the Android version it doesn't seem like IOS [just only ios has the animating marker]
Actual results
the marker had have animation when it changed the location [only ios]
Code sample
Code sample
Screenshots or Video
Screenshots / Video demons
709806730.864335.mp4
Logs
Logs
not have console logFlutter Doctor output
Doctor output
The text was updated successfully, but these errors were encountered: