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
은 카메라 이동이 종료되었을 때 실행되는 콜백 인터페이스입니다.
그래서 저는
state_animateCamera
라는 전역변수를 선언해주고,bool state_animateCamera=false;
animateCamera
이벤트 발생시 state_animateCamera
값을 true
로 변경하였습니다.controller.animateCamera(CameraUpdate.newLatLng(LatLng(lat,lng)));
state_animateCamera=true;
onCameraIdle
에서 state_animateCamera
값 확인 후 true
인 경우 callback
이벤트를 실행하는 것으로 구현하였습니다GoogleMap(
...
onCameraIdle: () {
if (state_animateCamera) {
callback();
state_animateCamera=false;
}
}
...
);
드디어 성공 ! 👌