[Flutter] Google map API 야간모드 적용하기

이번에 구글맵 API 가 벡터방식으로 변경되면서, 드디어 한국에서도 야간 및 다크모드를 쓸 수 있게 되었다.

기존의 비트맵 방식에서는, 야간모드를 적용해도 한국만 적용되지 않는 문제가 발생했었는데, 벡터방식으로 변경되면서 이제 한국도 되지 않을까 싶어서 테스트해보니, 정말 야간모드가 동작 하는 것이다.

야간모드를 적용하려면 지도 style 을 구성해서, json 파일을 로컬에 저장한뒤 앱 실행 시 로딩하여 적용해줘야한다.

아래 내용을 참조해서 진행했다.
https://medium.com/swlh/switch-to-dark-mode-in-real-time-with-flutter-and-google-maps-f0f080cd72e9

Switch to Dark Mode in Real-Time With Flutter and Google Maps

 

1. 지도 스타일 제작

우선 아래 페이지에서 구글맵 스타일을 제작한다.

https://mapstyle.withgoogle.com/

Styling Wizard: Google Maps APIs

진입하면, 아래와 같은 팝업창이 나타난다.
지도 스타일 변경하는 방법이 코드 수정없이 가능하다는 이야기다.

하지만 해당 방법은, 웹페이지용 자바스크립트 API에서만 가능한것 같고, 모바일용 버전에서는 아직 안되는것 같다.

때문에 일단 스킵하고, 전통의 방식을 사용하기로 했다.

위와 같은 화면에서, 원하는 스타일을 선택하고, FINISH를 누르면된다.

COPY JSON을 누른뒤 빈 텍스트파일을 열어 붙여넣기 하고, dark.json 과 같이 이름을 지정해준다. (이름은 아무렇게 지어도된다.)

 

 

2. JSON 파일 추가

flutter asset 폴더에 해당 json 파일을 복사하고 , pubspec.yaml 파일에 추가해준다.
assets 폴더에 map_styles 폴더를 새로 만든 뒤, dark.json 파일은 넣어주었기 때문에, 아래와같이 추가해주었다.

 

3. JSON 파일 로딩

 

4. 맵 스타일 적용

구글 맵이 ready 되어, controller를 얻어온 상태에서 다음과 같이 맵스타일을 지정해주면 스타일 적용이 완료된다.

 

5. 결과물 확인

드디어 구글맵에서도 야간 모드를 적용할 수 있게 되었다.

 

TILT 시켰을 때, 건물이 쫙 올라오는 모습이 인상적이다.

야간모드 굿!!