GoogleMap AnimateCamera callback

googleMap 위치 이동

googlemap 을 사용하다 보면 특정 위치로 지도를 이동시킬 일이 생기는데요,

그때는 아래와 같이 animateCamera 를 사용하여 구현하면 됩니다.

final GoogleMapController controller = await _controller.future;
await controller.animateCamera(CameraUpdate.newLatLng(LatLng(lat,lng)));

본론

여기에서 animateCamera의 이벤트가 끝났을 때(이동을 완료했을 때) 콜백을 주고 싶다면 어떻게 해야할까요?

첫번째 시도

controller.animateCamera의 return type은 Future<void> 입니다.

그렇다면 await controller.animateCamera(...)으로 처리 하고 그 아래에 콜백 이벤트를 주면 되지 않을까?

라고 생각 하실 수 있을 것 같아요 (제가 그랬,,ㅎ)

테스트 해보면 아시겠지만 await 를 걸어도 그 다음 스크립트가 animateCamera 이벤트 종료 전에 실행 되는 것을 볼 수 있을거에요.

첫번째 시도 실패 ! 🥲

두번째 시도

방법을 못찾겠어서 두번째는 하드코딩으로 딜레이를 주고 확인해가며 테스트 했어요.

controller.animateCamera(CameraUpdate.newLatLng(LatLng(lat,lng)));
await Future.delayed(Duration(milliseconds: 1500));

callback();

다행히 얼추 맞더라구요 (안드로이드 기준)
얼추 맞다는거에 위안을 갖고,,, 흐린 눈을 한 채 이대로 프로젝트를 진행하고 있었어요

근데 여기서 제가 간과한 중요한점,
플러터는 뭐다? 크로스플랫폼을 지원한다

계속 안드로이드로 작업 하다가 몇 주 뒤에 iOS로 테스트 하는데,
글쎄 iOS는 animateCamera 화면 이동 속도가 안드로이드보다 훨씬 빠르더라구요 😄😁😆 (아무튼 기쁜거임..)

이게 플랫폼 별로 화면 이동 속도가 다 다르고, 하드코딩으로 넣어놓은건 추후에 문제가 발생할 가능성이 크기 때문에 다시 방법을 찾아보기로 했습니다

두번째 시도 성공인 줄 알았으나 실패 ! 😩

드디어 해결

결국 돌고돌아 해결 했습니다..

GoogleMap(
  ...
  onCameraIdle: (){}
  ...
);

onCameraIdle은 카메라 이동이 종료되었을 때 실행되는 콜백 인터페이스입니다.

그래서 저는

1. state_animateCamera라는 전역변수를 선언해주고,

bool state_animateCamera=false;

2. animateCamera 이벤트 발생시 state_animateCamera 값을 true로 변경하였습니다.

controller.animateCamera(CameraUpdate.newLatLng(LatLng(lat,lng)));

state_animateCamera=true;

3. onCameraIdle에서 state_animateCamera 값 확인 후 true 인 경우 callback 이벤트를 실행하는 것으로 구현하였습니다

GoogleMap(
  ...
  onCameraIdle: () {
    if (state_animateCamera) {
      callback();
      state_animateCamera=false;
    }
  }
  ...
);

드디어 성공 ! 👌