[google_maps_flutter] [iOS] Stop Animation of Marker when it changed

[izzabellerina]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

1. when I changed the location of the marker it animated and did not reach immediately real time .
2. i have poly line but the polyline can reach the location immediately
3. it's just happened in the ios version

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

class MyTravelGoogleMap extends StatefulWidget {
  final List<HistoryModel> listHistory;
  final StreamController<int> indexController;
  final StreamController<bool> canDrawLineControl;
  final bool canMoveCamera;

  const MyTravelGoogleMap(
      {Key? key,
      required this.listHistory,
      required this.indexController,
      required this.canDrawLineControl,
      required this.canMoveCamera})
      : super(key: key);

  @override
  _MyTravelGoogleMapState createState() => _MyTravelGoogleMapState();
}

class _MyTravelGoogleMapState extends State<MyTravelGoogleMap> {
  // Marker? _userMarker;
  Completer<GoogleMapController> _controller = Completer();
  final _listDrawLine = <int>[];
  List<LatLng> listLatLng = [];

  @override
  void initState() {
    listLatLng = widget.listHistory.map((history) => history.latLng).toList();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
      await _onMoveCamera();
      // _onDrawLine();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final provider = InitProvider.initListen(context);
    final size = SizeScreen(context);

    return StreamBuilder<Position>(
        stream: Geolocator.getPositionStream(),
        initialData: provider.positionInit,
        builder: (_, position) {
          return StreamBuilder<int>(
              stream: widget.indexController.stream,
              initialData: 0,
              builder: (_, indexHistory) {
                // if (_listDrawLine.contains(indexHistory.data?.toInt() ?? 0)) {
                //   // debugPrint("BACKWARD ${index.toInt()}");
                //   _listDrawLine.remove(indexHistory.data?.toInt() ?? 0);
                // } else {
                //   // debugPrint("FORWARD ${index.toInt()}");
                //   _listDrawLine.add(indexHistory.data?.toInt() ?? 0);
                //   _listDrawLine.toSet().toList();
                // }
                final intDrawList = List.generate(
                    (indexHistory.data ?? 0) > 0
                        ? ((indexHistory.data ?? 0) + 1)
                        : 0,
                    (index) => index);
                final drawList = intDrawList
                    .map((e) => widget.listHistory[e].latLng)
                    .toList();
                return StreamBuilder<bool>(
                    stream: widget.canDrawLineControl.stream,
                    initialData: true,
                    builder: (_, canDraw) {
                      return GoogleMap(
                        mapType: MapType.normal,
                        onMapCreated: (map) {
                          _controller.complete(map);
                        },
                        polylines: {
                          // _polyDrawLine(latLngList: listDraw),
                          if (canDraw.data ?? false)
                            _polyDrawLine(latLngList: drawList),
                          if (!(canDraw.data ?? false))
                            _polyline(latLngList: listLatLng),
                        },
                        markers: {
                          _arrowMarker(
                              latLng: widget
                                  .listHistory[indexHistory.data!.toInt()]
                                  .latLng,
                              rotation: (widget
                                  .listHistory[indexHistory.data!.toInt()]
                                  .azimuth
                                  .toDouble())),
                          _userMarker(position: position.data!),
                          _startFlagMarker(latLng: listLatLng.first),
                          _endFlagMarker(latLng: listLatLng.last),
                        },
                        initialCameraPosition: CameraPosition(
                          target: listLatLng.first,
                          zoom: 14.4746,
                        ),
                      );
                    });
              });
        });
  }

  // void _onDrawLine() {
  //   widget.indexController.stream.listen((index) {
  //     if (_listDrawLine.contains(index.toInt())) {
  //       debugPrint("BACKWARD ${index.toInt()}");
  //       _listDrawLine.remove(index.toInt());
  //     } else {
  //       debugPrint("FORWARD ${index.toInt()}");
  //       _listDrawLine.add(index.toInt());
  //       _listDrawLine.toSet().toList();
  //     }
  //     setState(() {});
  //   });
  // }

  Future<void> _onMoveCamera() async {
    final GoogleMapController controller = await _controller.future;

    widget.indexController.stream.listen((index) async {
      if (widget.canMoveCamera) {
        if ((index % 7) == 0) {
          controller.animateCamera(CameraUpdate.newLatLngZoom(
              widget.listHistory[index.round()].latLng, 14));
        }
      }
    });
  }

  Polyline _polyDrawLine({required List<LatLng> latLngList}) {
    final size = SizeScreen(context);

    return Polyline(
        polylineId: const PolylineId("DrawLine"),
        points: latLngList,
        color: const Color(0xffD68401),
        width: size.h015 ~/ 2);
  }

  Polyline _polyline({required List<LatLng> latLngList}) {
    final size = SizeScreen(context);

    return Polyline(
        polylineId: const PolylineId("All The way line"),
        points: latLngList,
        color: const Color(0xff43E53C),
        width: size.h015 ~/ 2);
  }

  Marker _userMarker({required Position position}) {
    final pin = InitProvider.initNoListen(context).pinMapModel!;
    return Marker(
        markerId: MarkerId("_userMarker"),
        icon: pin.userPin,
        position: LatLng(position.latitude, position.longitude),
        infoWindow: InfoWindow(title: "You are here!"));
  }

  Marker _startFlagMarker({required LatLng latLng}) {
    final pin = InitProvider.initNoListen(context).pinMapModel!;
    return Marker(
        markerId: MarkerId("_startFlagMarker"),
        icon: pin.flagStartPin,
        position: latLng,
        infoWindow: InfoWindow(title: "Start From here!"));
  }

  Marker _endFlagMarker({required LatLng latLng}) {
    final pin = InitProvider.initNoListen(context).pinMapModel!;
    return Marker(
        markerId: MarkerId("_endFlagMarker"),
        icon: pin.flagEndPin,
        position: latLng,
        infoWindow: InfoWindow(title: "End to here!"));
  }

  Marker _arrowMarker({required LatLng latLng, required double rotation}) {
    final pin = InitProvider.initNoListen(context).pinMapModel!;
    return Marker(
        markerId: MarkerId("_arrowMarker"),
        icon: pin.arrow,
        rotation: rotation,
        flat: true,
        position: latLng,
        anchor: const Offset(0.5, 0.5),
        infoWindow: InfoWindow(title: "End to here!"));
  }
}

Screenshots or Video

Screenshots / Video demons

709806730.864335.mp4

[](url)

Logs

Logs

not have console log

Flutter Doctor output

Doctor output

[!] Flutter (Channel stable, 3.10.4, on macOS 13.4.1 22F82 darwin-arm64, locale en-GB)
    • Flutter version 3.10.4 on channel stable 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 682aa387cf (3 weeks ago), 2023-06-05 18:04:56 -0500
    • Engine revision 2a3401c9bb
    • Dart version 3.0.3
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at 
    • Platform android-33, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
    • macOS (desktop)          • macos                     • darwin-arm64   • macOS 13.4.1 22F82 darwin-arm64
    • Chrome (web)             • chrome                    • web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.
Process finished with exit code 0```

</details>

[dam-ease]

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)

[izzabellerina]

@dam-ease thank you for waiting for me to reply to you late.
this is the marker movement that I expect from the Android version . it's no animation when the marker changed the location unlike ios do.
this is the video of i am expected
https://github.com/flutter/flutter/assets/58029766/a4ea3e32-265f-461f-a9c5-cab293b7934b

[izzabellerina]

this is flutter doctor
[!] Flutter (Channel stable, 3.10.5, on macOS 13.4.1 22F82 darwin-arm64, locale en-GB)
• Flutter version 3.10.5 on channel stable at /Users/pnall02/flutter
! The flutter binary is not on your path. Consider adding /Users/pnall02/flutter/bin to your path.
! The dart binary is not on your path. Consider adding /Users/pnall02/flutter/bin to your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 796c8ef (4 weeks ago), 2023-06-13 15:51:02 -0700
• Engine revision 45f6e00911
• Dart version 3.0.5
• DevTools version 2.23.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at /Users/pnall02/Library/Android/sdk
• Platform android-33, build-tools 31.0.0
• Java binary at: /Applications/Android Studio 2.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
• CocoaPods version 1.12.0

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
• Android Studio at /Applications/Android Studio 2.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.80.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.4.1 22F82 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
• All expected network resources are available.

[izzabellerina]

@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.

[dam-ease]

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.
I tried to take out codes using third-party plugins but in the bid to do that, I might take out the expected behaviours to reproduce. Kindly work around reducing the code sample to a minimal point at which the issue reproduces.

[izzabellerina]

@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"))},
          ),
        ],
      ),
    );
  }
}

[izzabellerina]

@dam-ease And this is my expectation that could be from android

711284465.245764.mp4

and this is from ios done

711284465.333209.mp4

[dam-ease]

Hi @izzabellerina. Thanks for your patience and the detailed explanation. I am able to reproduce this issue on the latest master and stable channels. On iOS both with Impeller and without, there is an animation of marker from one point to another.

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.mov

flutter doctor -v

[✓] Flutter (Channel stable, 3.10.6, on macOS 13.0 22A380 darwin-arm64, locale en-NG)
    • Flutter version 3.10.6 on channel stable at /Users/damilolaalimi/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f468f3366c (5 days ago), 2023-07-12 15:19:05 -0700
    • Engine revision cdbeda788a
    • Dart version 3.0.6
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/damilolaalimi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.80.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (4 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  •
      Android 14 (API 34) (emulator)
    • iPhone 14 Pro Max (mobile)  • BB55E997-7F31-462D-B3B1-6B177D9B40C7 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)             • macos                                • darwin-arm64   • macOS
      13.0 22A380 darwin-arm64
    • Chrome (web)                • chrome                               • web-javascript •
      Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[✓] Flutter (Channel master, 3.13.0-5.0.pre.39, on macOS 13.0 22A380 darwin-arm64, locale en-NG)
    • Flutter version 3.13.0-5.0.pre.39 on channel master at /Users/damilolaalimi/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 39c475c379 (78 minutes ago), 2023-07-18 03:01:24 -0400
    • Engine revision c6e23288db
    • Dart version 3.1.0 (build 3.1.0-321.0.dev)
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/damilolaalimi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.80.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (4 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  • Android 14 (API 34) (emulator)
    • iPhone 14 Pro Max (mobile)  • BB55E997-7F31-462D-B3B1-6B177D9B40C7 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)             • macos                                • darwin-arm64   • macOS 13.0 22A380 darwin-arm64
    • Chrome (web)                • chrome                               • web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

• No issues found!