🐡

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

2 min read

はじめに

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

google_maps_flutter: ^2.1.0を使用しています。

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

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

GoogleMap(
  onMapCreated: (controller) async {
    // ここで表示スタイルの設定をします。
    // 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ファイルを作成してください。スタイルを決めたらFINISHボタンを押してください。表示されたモーダルにスタイル用のJSONが表示されるのでコピーしてください。

JSONファイルを作成

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

app_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) async {
    // この部分にコードを追加してください。
  },
),

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

ログインするとコメントできます