[google_maps_flutter] Add style to widget

packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md

@@ -1,5 +1,10 @@
-## NEXT
+## 2.6.0
 
+* Adds `style` to the GoogleMap widget constructor. This allows setting the map
+  style during creation, avoiding the possibility of the default style being
+  displayed briefly.
+* Deprecates `GoogleMapController.setMapStyle` in favor of setting the style via
+  the new widget `style` parameter.
 * Updates minimum supported SDK version to Flutter 3.13/Dart 3.1.
 
 ## 2.5.3

packages/google_maps_flutter/google_maps_flutter/example/integration_test/src/maps_controller.dart

@@ -448,6 +448,28 @@ void runTests() {
       await mapIdCompleter.future;
     },
   );
+
+  testWidgets('getStyleError reports last error', (WidgetTester tester) async {
+    final Key key = GlobalKey();
+    final Completer<GoogleMapController> controllerCompleter =
+        Completer<GoogleMapController>();
+
+    await tester.pumpWidget(Directionality(
+      textDirection: TextDirection.ltr,
+      child: GoogleMap(
+        key: key,
+        initialCameraPosition: kInitialCameraPosition,
+        style: '[[[this is an invalid style',
+        onMapCreated: (GoogleMapController controller) {
+          controllerCompleter.complete(controller);
+        },
+      ),
+    ));
+
+    final GoogleMapController controller = await controllerCompleter.future;
+    final String? error = await controller.getStyleError();
+    expect(error, isNotNull);
+  });
 }
 
 /// Repeatedly checks an asynchronous value against a test condition.

packages/google_maps_flutter/google_maps_flutter/example/lib/map_ui.dart

@@ -4,6 +4,7 @@
 
 // ignore_for_file: public_member_api_docs
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart' show rootBundle;
 import 'package:google_maps_flutter/google_maps_flutter.dart';
@@ -59,6 +60,7 @@ class MapUiBodyState extends State<MapUiBody> {
   bool _myLocationButtonEnabled = true;
   late GoogleMapController _controller;
   bool _nightMode = false;
+  String _mapStyle = '';
 
   @override
   void initState() {
@@ -243,27 +245,18 @@ class MapUiBodyState extends State<MapUiBody> {
     return rootBundle.loadString(path);
   }
 
-  void _setMapStyle(String mapStyle) {
-    setState(() {
-      _nightMode = true;
-      _controller.setMapStyle(mapStyle);
-    });
-  }
-
   // Should only be called if _isMapCreated is true.
   Widget _nightModeToggler() {
     assert(_isMapCreated);
     return TextButton(
       child: Text('${_nightMode ? 'disable' : 'enable'} night mode'),
-      onPressed: () {
-        if (_nightMode) {
-          setState(() {
-            _nightMode = false;
-            _controller.setMapStyle(null);
-          });
-        } else {
-          _getFileData('assets/night_mode.json').then(_setMapStyle);
-        }
+      onPressed: () async {
+        _nightMode = !_nightMode;
+        final String style =
+            _nightMode ? await _getFileData('assets/night_mode.json') : '';
+        setState(() {
+          _mapStyle = style;
+        });
       },
     );
   }
@@ -278,6 +271,7 @@ class MapUiBodyState extends State<MapUiBody> {
       cameraTargetBounds: _cameraTargetBounds,
       minMaxZoomPreference: _minMaxZoomPreference,
       mapType: _mapType,
+      style: _mapStyle,
       rotateGesturesEnabled: _rotateGesturesEnabled,
       scrollGesturesEnabled: _scrollGesturesEnabled,
       tiltGesturesEnabled: _tiltGesturesEnabled,
@@ -352,5 +346,13 @@ class MapUiBodyState extends State<MapUiBody> {
       _controller = controller;
       _isMapCreated = true;
     });
+    // Log any style errors to the console for debugging.
+    if (kDebugMode) {
+      _controller.getStyleError().then((String? error) {
+        if (error != null) {
+          debugPrint(error);
+        }
+      });
+    }
   }
 }

packages/google_maps_flutter/google_maps_flutter/example/pubspec.yaml

@@ -33,3 +33,11 @@ flutter:
   uses-material-design: true
   assets:
     - assets/
+
+# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
+# See https://github.com/flutter/flutter/wiki/Contributing-to-Plugins-and-Packages#changing-federated-plugins
+dependency_overrides:
+  google_maps_flutter_android: {path: ../../../google_maps_flutter/google_maps_flutter_android}
+  google_maps_flutter_ios: {path: ../../../google_maps_flutter/google_maps_flutter_ios}
+  google_maps_flutter_platform_interface: {path: ../../../google_maps_flutter/google_maps_flutter_platform_interface}
+  google_maps_flutter_web: {path: ../../../google_maps_flutter/google_maps_flutter_web}

packages/google_maps_flutter/google_maps_flutter/lib/src/controller.dart

@@ -190,11 +190,17 @@ class GoogleMapController {
   /// 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.
+  @Deprecated('Use GoogleMap.style instead.')
   Future<void> setMapStyle(String? mapStyle) {
     return GoogleMapsFlutterPlatform.instance
         .setMapStyle(mapStyle, mapId: mapId);
   }
 
+  /// Returns the last style error, if any.
+  Future<String?> getStyleError() {
+    return GoogleMapsFlutterPlatform.instance.getStyleError(mapId: mapId);
+  }
+
   /// Return [LatLngBounds] defining the region that is visible in a map.
   Future<LatLngBounds> getVisibleRegion() {
     return GoogleMapsFlutterPlatform.instance.getVisibleRegion(mapId: mapId);

packages/google_maps_flutter/google_maps_flutter/lib/src/google_map.dart

@@ -91,6 +91,7 @@ class GoogleMap extends StatefulWidget {
   const GoogleMap({
     super.key,
     required this.initialCameraPosition,
+    this.style,
     this.onMapCreated,
     this.gestureRecognizers = const <Factory<OneSequenceGestureRecognizer>>{},
     this.webGestureHandling,
@@ -136,6 +137,19 @@ class GoogleMap extends StatefulWidget {
   /// The initial position of the map's camera.
   final CameraPosition initialCameraPosition;
 
+  /// The style for the map.
+  ///
+  /// Set to null to clear any previous custom styling.
+  ///
+  /// If problems were detected with the [mapStyle], including un-parsable
+  /// styling JSON, unrecognized feature type, unrecognized element type, or
+  /// invalid styler keys, the style is left unchanged, and the error can be
+  /// retrieved with [GoogleMapController.getStyleError].
+  ///
+  /// The style string can be generated using the
+  /// [map style tool](https://mapstyle.withgoogle.com/).
+  final String? style;
+
   /// True if the map should show a compass when rotated.
   final bool compassEnabled;
 
@@ -556,5 +570,8 @@ MapConfiguration _configurationFromMapWidget(GoogleMap map) {
     trafficEnabled: map.trafficEnabled,
     buildingsEnabled: map.buildingsEnabled,
     cloudMapId: map.cloudMapId,
+    // A null style in the widget means no style, which is expressed as '' in
+    // the configuration to distinguish from no change (null).
+    style: map.style ?? '',
   );
 }

packages/google_maps_flutter/google_maps_flutter/pubspec.yaml

@@ -2,7 +2,7 @@ name: google_maps_flutter
 description: A Flutter plugin for integrating Google Maps in iOS and Android applications.
 repository: https://github.com/flutter/packages/tree/main/packages/google_maps_flutter/google_maps_flutter
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+maps%22
-version: 2.5.3
+version: 2.6.0
 
 environment:
   sdk: ^3.1.0
@@ -40,3 +40,11 @@ topics:
 # The example deliberately includes limited-use secrets.
 false_secrets:
   - /example/web/index.html
+
+# FOR TESTING AND INITIAL REVIEW ONLY. DO NOT MERGE.
+# See https://github.com/flutter/flutter/wiki/Contributing-to-Plugins-and-Packages#changing-federated-plugins
+dependency_overrides:
+  google_maps_flutter_android: {path: ../../google_maps_flutter/google_maps_flutter_android}
+  google_maps_flutter_ios: {path: ../../google_maps_flutter/google_maps_flutter_ios}
+  google_maps_flutter_platform_interface: {path: ../../google_maps_flutter/google_maps_flutter_platform_interface}
+  google_maps_flutter_web: {path: ../../google_maps_flutter/google_maps_flutter_web}

packages/google_maps_flutter/google_maps_flutter/test/google_map_test.dart

@@ -551,4 +551,32 @@ void main() {
 
     expect(map.mapConfiguration.buildingsEnabled, true);
   });
+
+  testWidgets('Can update style', (WidgetTester tester) async {
+    const String initialStyle = '[]';
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: GoogleMap(
+          initialCameraPosition: CameraPosition(target: LatLng(10.0, 15.0)),
+          style: initialStyle,
+        ),
+      ),
+    );
+
+    final PlatformMapStateRecorder map = platform.lastCreatedMap;
+
+    expect(map.mapConfiguration.style, initialStyle);
+
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: GoogleMap(
+          initialCameraPosition: CameraPosition(target: LatLng(10.0, 15.0)),
+        ),
+      ),
+    );
+
+    expect(map.mapConfiguration.style, '');
+  });
 }

packages/google_maps_flutter/google_maps_flutter_android/CHANGELOG.md

@@ -1,5 +1,7 @@
-## NEXT
+## 2.7.0
 
+* Adds support for `MapConfiguration.style`.
+* Adds support for `getStyleError`.
 * Updates minimum supported SDK version to Flutter 3.13/Dart 3.1.
 * Updates compileSdk version to 34.
 

packages/google_maps_flutter/google_maps_flutter_android/android/src/main/java/io/flutter/plugins/googlemaps/Convert.java

@@ -377,6 +377,10 @@ static void interpretGoogleMapOptions(Object o, GoogleMapOptionsSink sink) {
     if (buildingsEnabled != null) {
       sink.setBuildingsEnabled(toBoolean(buildingsEnabled));
     }
+    final Object style = data.get("style");
+    if (style != null) {
+      sink.setMapStyle(toString(style));
+    }
   }
 
   /** Returns the dartMarkerId of the interpreted marker. */

packages/google_maps_flutter/google_maps_flutter_android/android/src/main/java/io/flutter/plugins/googlemaps/GoogleMapBuilder.java

@@ -6,6 +6,7 @@
 
 import android.content.Context;
 import android.graphics.Rect;
+import androidx.annotation.Nullable;
 import com.google.android.gms.maps.GoogleMapOptions;
 import com.google.android.gms.maps.model.CameraPosition;
 import com.google.android.gms.maps.model.LatLngBounds;
@@ -27,6 +28,7 @@ class GoogleMapBuilder implements GoogleMapOptionsSink {
   private Object initialCircles;
   private List<Map<String, ?>> initialTileOverlays;
   private Rect padding = new Rect(0, 0, 0, 0);
+  private @Nullable String style;
 
   GoogleMapController build(
       int id,
@@ -48,6 +50,7 @@ GoogleMapController build(
     controller.setInitialCircles(initialCircles);
     controller.setPadding(padding.top, padding.left, padding.bottom, padding.right);
     controller.setInitialTileOverlays(initialTileOverlays);
+    controller.setMapStyle(style);
     return controller;
   }
 
@@ -178,4 +181,9 @@ public void setInitialCircles(Object initialCircles) {
   public void setInitialTileOverlays(List<Map<String, ?>> initialTileOverlays) {
     this.initialTileOverlays = initialTileOverlays;
   }
+
+  @Override
+  public void setMapStyle(@Nullable String style) {
+    this.style = style;
+  }
 }

packages/google_maps_flutter/google_maps_flutter_android/android/src/main/java/io/flutter/plugins/googlemaps/GoogleMapController.java

@@ -48,6 +48,7 @@
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.Objects;
 
 /** Controller of a single GoogleMaps MapView instance. */
 final class GoogleMapController
@@ -87,6 +88,9 @@ final class GoogleMapController
   private List<Object> initialPolylines;
   private List<Object> initialCircles;
   private List<Map<String, ?>> initialTileOverlays;
+  // Null except between initialization and onMapReady.
+  private @Nullable String initialMapStyle;
+  private @Nullable String lastStyleError;
   @VisibleForTesting List<Float> initialPadding;
 
   GoogleMapController(
@@ -169,6 +173,10 @@ public void onMapReady(GoogleMap googleMap) {
           initialPadding.get(2),
           initialPadding.get(3));
     }
+    if (initialMapStyle != null) {
+      updateMapStyle(initialMapStyle);
+      initialMapStyle = null;
+    }
   }
 
   // Returns the first TextureView found in the view hierarchy.
@@ -459,26 +467,22 @@ public void onSnapshotReady(Bitmap bitmap) {
         }
       case "map#setStyle":
         {
-          boolean mapStyleSet;
-          if (call.arguments instanceof String) {
-            String mapStyle = (String) call.arguments;
-            if (mapStyle == null) {
-              mapStyleSet = googleMap.setMapStyle(null);
-            } else {
-              mapStyleSet = googleMap.setMapStyle(new MapStyleOptions(mapStyle));
-            }
-          } else {
-            mapStyleSet = googleMap.setMapStyle(null);
-          }
+          Object arg = call.arguments;
+          final String style = arg instanceof String ? (String) arg : null;
+          final boolean mapStyleSet = updateMapStyle(style);
           ArrayList<Object> mapStyleResult = new ArrayList<>(2);
           mapStyleResult.add(mapStyleSet);
           if (!mapStyleSet) {
-            mapStyleResult.add(
-                "Unable to set the map style. Please check console logs for errors.");
+            mapStyleResult.add(lastStyleError);
           }
           result.success(mapStyleResult);
           break;
         }
+      case "map#getStyleError":
+        {
+          result.success(lastStyleError);
+          break;
+        }
       case "tileOverlays#update":
         {
           List<Map<String, ?>> tileOverlaysToAdd = call.argument("tileOverlaysToAdd");
@@ -926,4 +930,22 @@ public void setTrafficEnabled(boolean trafficEnabled) {
   public void setBuildingsEnabled(boolean buildingsEnabled) {
     this.buildingsEnabled = buildingsEnabled;
   }
+
+  public void setMapStyle(@Nullable String style) {
+    if (googleMap == null) {
+      initialMapStyle = style;
+    } else {
+      updateMapStyle(style);
+    }
+  }
+
+  private boolean updateMapStyle(String style) {
+    // Dart passes an empty string to indicate that the style should be cleared.
+    final MapStyleOptions mapStyleOptions =
+        style == null || style.isEmpty() ? null : new MapStyleOptions(style);
+    final boolean set = Objects.requireNonNull(googleMap).setMapStyle(mapStyleOptions);
+    lastStyleError =
+        set ? null : "Unable to set the map style. Please check console logs for errors.";
+    return set;
+  }
 }

packages/google_maps_flutter/google_maps_flutter_android/android/src/main/java/io/flutter/plugins/googlemaps/GoogleMapOptionsSink.java

@@ -4,6 +4,7 @@
 
 package io.flutter.plugins.googlemaps;
 
+import androidx.annotation.Nullable;
 import com.google.android.gms.maps.model.LatLngBounds;
 import java.util.List;
 import java.util.Map;
@@ -55,4 +56,6 @@ interface GoogleMapOptionsSink {
   void setInitialCircles(Object initialCircles);
 
   void setInitialTileOverlays(List<Map<String, ?>> initialTileOverlays);
+
+  void setMapStyle(@Nullable String style);
 }