Zenn
🐡

[Flutter]GoogleMapをダークモードにする

2021/11/23に公開
Flutter
tech

はじめに

Googleマップをダークモードに対応する方法をご紹介します。少し特殊な方法だったので記事にすることにしました。

ダークモードに対応するには？

ダークモードに対応するにはGoogleMapControllerのsetMapStyle(String? mapStyle)にJSONで書かれたマップのスタイル情報を渡します。マップを表示するときにonMapCreated(GoogleMapController controller)が実行されるのでこのメソッド内で表示スタイルを変更すればよさそうです。

GoogleMap(
  onMapCreated: (controller) {
    // ここで表示スタイルの設定をします。
    // controller.setMapStyle(mapStyle);
  },
),

スタイル設定用のJsonファイルを作る

setMapStyle(String? mapStyle)でマップの表示スタイルを変更できます。引数に渡すString型のデータは何を渡せば良いのでしょうか？setMapStyleの定義を確認すると以下のようなコメントが書かれていました。

The style string can be generated using [map style tool] (https://mapstyle.withgoogle.com/).
Also, refer [iOS] (https://developers.google.com/maps/documentation/ios-sdk/style-reference)
and [Android] (https://developers.google.com/maps/documentation/android-sdk/style-reference)
style reference for more information regarding the supported styles.

どうやらmap style toolでスタイルを生成する必要があるみたいです。

map style toolの使ってJsonを生成

map style toolを開いてJSONファイルを作成してください。

JSONファイルを作成

次に、Flutterで先ほどコピーしたJSONを読み込むためにJSONファイルを作成します。AssetにJSONファイルを作成しましょう。

例）{project_name}/assets/jsons/google_map_style.json作成する場合

{project_name}/
  assets/
    jsons/
      google_map_style.json

google_map_style.jsonに先ほどコピーしたJSONをペーストしてください。

google_map_style.json
// コピーしたJSONをペーストする

pubspec.yamlに作成したファイルを読み込むように設定を追加しflutter pub getします。

pubspec.yaml
flutter:
  assets:
    - assets/jsons/google_map_style.json

マップのスタイルを変更する

いよいよマップをダークモードに対応していきます。ここからは以下の部分にコードを加えていきます。

GoogleMap(
  onMapCreated: (controller) {
    // この部分にコードを追加してください。
  },
),

Jsonファイルを読み込む

今回はJsonをデコードせずString型で取得したいため以下のようにします。

final googleMapStyle = await rootBundle.loadString('assets/jsons/google_map_style.json');

ダークモードに対応

if文を使用してダークモードの時だけマップのスタイルを変更するようにしましょう。

final googleMapStyle = await rootBundle.loadString('assets/jsons/google_map_style.json');
if (Theme.of(context).brightness == Brightness.dark) {
  await controller.setMapStyle(googleMapStyle);
}

コード

GoogleMap(
  ...
  onMapCreated: (controller) async {
    final googleMapStyle = await rootBundle.loadString('assets/jsons/google_map_style.json');
    if (Theme.of(context).brightness == Brightness.dark) {
      await controller.setMapStyle(googleMapStyle);
    }
  },
  ...
),

Discussion