【Flutter】GoogleMapのダークモード、ライトモードをリアルタイムに反映させたいのですができません。

Question

質問内容

FlutterでGoogleMapを表示させているのですが、デバイスの設定の外観モードを変更すると、GoogleMapの外観を変えたいです。
しかし、GoogleMapの「onMapCreated」プロパティが実行されません。
どうすれば、アプリがバックグラウンドから戻ってきたタイミングでGoogleMapの外観を変更させることができるのでしょうか？

該当のソースコード

import 'dart:async';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter/services.dart' show rootBundle;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  const MapSample({super.key});
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> with WidgetsBindingObserver {
  final Completer<GoogleMapController> _controller = Completer();
  late Brightness justBeforeMode;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (AppLifecycleState.paused == state) {
      justBeforeMode = ui.window.platformBrightness;
    }
    if (AppLifecycleState.resumed == state) {
      if (ui.window.platformBrightness != justBeforeMode) {
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ui.window.platformBrightness == Brightness.light
          ?
          // lightMode
          GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: const CameraPosition(
                target: LatLng(37.42796133580664, -122.085749655962),
              ),
              onMapCreated: (GoogleMapController controller) async {
                _controller.complete(controller);
              },
            )
          :
          // darkMode
          GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: const CameraPosition(
                target: LatLng(37.42796133580664, -122.085749655962),
              ),
              onMapCreated: (GoogleMapController controller) async {
                final darkGoogleMapStyle = await rootBundle
                    .loadString('assets/jsons/dark_map_style.json');
                await controller.setMapStyle(darkGoogleMapStyle);
                _controller.complete(controller);
              },
            ),
    );
  }
}

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.7.10, on macOS 13.3.1）
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)

Answer 1

MapSampleState側だけ。

class MapSampleState extends State<MapSample> with WidgetsBindingObserver {
  GoogleMapController? _controller;
  final String _light = "[]";
  late String _dark;

  @override
  void initState() {
    rootBundle
        .loadString('assets/jsons/dark_map_style.json')
        .then((value) => _dark = value);
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  void _setMapStyle() {
    _controller?.setMapStyle(
        PlatformDispatcher.instance.platformBrightness == Brightness.light
            ? _light
            : _dark);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangePlatformBrightness() {
    _setMapStyle();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: const CameraPosition(
          target: LatLng(37.42796133580664, -122.085749655962),
        ),
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
          _setMapStyle();
        },
      ),
    );
  }
}

私のコードではスタイルの変更タイミングは、didChangePlatformBrightnessが来た時に行っている。
提示されているコードではAppLifecycleState.resumedだけど、didChangePlatformBrightnessの方が正しいと思う。

本題のスタイル変更の処理に関しては、GoogleMapControllerに対してsetMapStyleを適用するというのが正しいのだけど、それを行う場所はonMapCreatedの中でというわけではなく、GoogleMapControllerが確定しているのであればどこでも実行可能。
そのため、onMapCreatedで確定後とそれを_controllerに入れた後であればどこでもアクセスはできる。
そういうことでdidChangePlatformBrightnessの中で現在の輝度モードの設定によりスタイルを変更する処理を走らせることでスタイルの更新ができるようになる。
Androidで試したけどiOSでもたぶん同じだと思う（思いたい）。

提示された実装ではbuildメソッド内でui.window.platformBrightness == Brightness.lightで構築するウィジェットを切り替えようとしているけど、これは生成されるウィジェットは同一と判断されるので、State側は再構築されずonMapCreatedは呼び出されないのでスタイルの変更は行われないという状況になっている。

---

実装を一部修正。
Completerを使っていた部分をnull許容変数に変更。
google_maps_flutterのトップページにあるサンプルではCompleterを使っているのだけど、github側の例はほとんどが?のnull許容変数を使っていたのと、このような使い方でCompleterは適当ではないと思い変更しました。

Comments

[bbiiq]

回答ありがとうございます。
教えていただいたコードでうまくいきました。
とても勉強になりました。ありがとうございます。