[google_maps_flutter_web] Fix convert.dart issues (#3093)

* Convert initial Polyline/Polygon points correctly.
* Convert Flutter Color to CSS correctly.

Fixes flutter/flutter#65152
Fixes flutter/flutter#67032

Author: ditman

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.1.0+3
+
+* Fix crash when converting initial polylines and polygons. [Issue](https://github.com/flutter/flutter/issues/65152).
+* Correctly convert Colors when rendering polylines, polygons and circles. [Issue](https://github.com/flutter/flutter/issues/67032).
+
 ## 0.1.0+2
 
 * Fix crash when converting Markers with icon explicitly set to null. [Issue](https://github.com/flutter/flutter/issues/64938).

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

@@ -13,6 +13,8 @@ final _nullLatLngBounds = LatLngBounds(
 // Defaults taken from the Google Maps Platform SDK documentation.
 final _defaultStrokeColor = Colors.black.value;
 final _defaultFillColor = Colors.transparent.value;
+final _defaultCssColor = '#000000';
+final _defaultCssOpacity = 0.0;
 
 // Indices in the plugin side don't match with the ones
 // in the gmaps lib. This translates from plugin -> gmaps.
@@ -24,6 +26,22 @@ final _mapTypeToMapTypeId = {
   4: gmaps.MapTypeId.HYBRID,
 };
 
+// Converts a [Color] into a valid CSS value #RRGGBB.
+String _getCssColor(Color color) {
+  if (color == null) {
+    return _defaultCssColor;
+  }
+  return '#' + color.value.toRadixString(16).padLeft(8, '0').substring(2);
+}
+
+// Extracts the opacity from a [Color].
+double _getCssOpacity(Color color) {
+  if (color == null) {
+    return _defaultCssOpacity;
+  }
+  return color.opacity;
+}
+
 // Converts options from the plugin into gmaps.MapOptions that can be used by the JS SDK.
 // The following options are not handled here, for various reasons:
 // The following are not available in web, because the map doesn't rotate there:
@@ -319,7 +337,7 @@ Set<Polyline> _rawOptionsToInitialPolylines(Map<String, dynamic> rawOptions) {
           zIndex: rawPolyline['zIndex'],
           width: rawPolyline['width'],
           points: rawPolyline['points']
-              ?.map((rawPoint) => LatLng.fromJson(rawPoint))
+              ?.map<LatLng>((rawPoint) => LatLng.fromJson(rawPoint))
               ?.toList(),
         );
       }) ??
@@ -342,7 +360,7 @@ Set<Polygon> _rawOptionsToInitialPolygons(Map<String, dynamic> rawOptions) {
           visible: rawPolygon['visible'],
           zIndex: rawPolygon['zIndex'],
           points: rawPolygon['points']
-              ?.map((rawPoint) => LatLng.fromJson(rawPoint))
+              ?.map<LatLng>((rawPoint) => LatLng.fromJson(rawPoint))
               ?.toList(),
         );
       }) ??
@@ -418,11 +436,11 @@ gmaps.MarkerOptions _markerOptionsFromMarker(
 
 gmaps.CircleOptions _circleOptionsFromCircle(Circle circle) {
   final populationOptions = gmaps.CircleOptions()
-    ..strokeColor = '#' + circle.strokeColor.value.toRadixString(16)
-    ..strokeOpacity = 0.8
+    ..strokeColor = _getCssColor(circle.strokeColor)
+    ..strokeOpacity = _getCssOpacity(circle.strokeColor)
     ..strokeWeight = circle.strokeWidth
-    ..fillColor = '#' + circle.fillColor.value.toRadixString(16)
-    ..fillOpacity = 0.6
+    ..fillColor = _getCssColor(circle.fillColor)
+    ..fillOpacity = _getCssOpacity(circle.fillColor)
     ..center = gmaps.LatLng(circle.center.latitude, circle.center.longitude)
     ..radius = circle.radius
     ..visible = circle.visible;
@@ -437,11 +455,11 @@ gmaps.PolygonOptions _polygonOptionsFromPolygon(
   });
   return gmaps.PolygonOptions()
     ..paths = paths
-    ..strokeColor = '#' + polygon.strokeColor.value.toRadixString(16)
-    ..strokeOpacity = 0.8
+    ..strokeColor = _getCssColor(polygon.strokeColor)
+    ..strokeOpacity = _getCssOpacity(polygon.strokeColor)
     ..strokeWeight = polygon.strokeWidth
-    ..fillColor = '#' + polygon.fillColor.value.toRadixString(16)
-    ..fillOpacity = 0.35
+    ..fillColor = _getCssColor(polygon.fillColor)
+    ..fillOpacity = _getCssOpacity(polygon.fillColor)
     ..visible = polygon.visible
     ..zIndex = polygon.zIndex
     ..geodesic = polygon.geodesic;
@@ -456,9 +474,9 @@ gmaps.PolylineOptions _polylineOptionsFromPolyline(
 
   return gmaps.PolylineOptions()
     ..path = paths
-    ..strokeOpacity = 1.0
     ..strokeWeight = polyline.width
-    ..strokeColor = '#' + polyline.color.value.toRadixString(16).substring(0, 6)
+    ..strokeColor = _getCssColor(polyline.color)
+    ..strokeOpacity = _getCssOpacity(polyline.color)
     ..visible = polyline.visible
     ..zIndex = polyline.zIndex
     ..geodesic = polyline.geodesic;

packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml

@@ -1,7 +1,7 @@
 name: google_maps_flutter_web
 description: Web platform implementation of google_maps_flutter
 homepage: https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter
-version: 0.1.0+2
+version: 0.1.0+3
 
 flutter:
   plugin:

packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/google_maps_controller_integration.dart

@@ -149,10 +149,26 @@ void main() {
             {'markerId': 'marker-1'}
           ],
           'polygonsToAdd': [
-            {'polygonId': 'polygon-1'}
+            {
+              'polygonId': 'polygon-1',
+              'points': [
+                [43.355114, -5.851333],
+                [43.354797, -5.851860],
+                [43.354469, -5.851318],
+                [43.354762, -5.850824],
+              ],
+            },
           ],
           'polylinesToAdd': [
-            {'polylineId': 'polyline-1'}
+            {
+              'polylineId': 'polyline-1',
+              'points': [
+                [43.355114, -5.851333],
+                [43.354797, -5.851860],
+                [43.354469, -5.851318],
+                [43.354762, -5.850824],
+              ],
+            },
           ],
         });
         controller.debugSetOverrides(

packages/google_maps_flutter/google_maps_flutter_web/test/test_driver/shapes_integration.dart

@@ -3,12 +3,18 @@
 // found in the LICENSE file.
 
 import 'dart:async';
+import 'dart:ui';
 
 import 'package:integration_test/integration_test.dart';
 import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
 import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+// This value is used when comparing the results of
+// converting from a byte value to a double between 0 and 1.
+// (For Color opacity values, for example)
+const _acceptableDelta = 0.01;
+
 /// Test Shapes (Circle, Polygon, Polyline)
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -77,6 +83,25 @@ void main() {
       expect(controller.circles, contains(CircleId('2')));
       expect(controller.circles, isNot(contains(CircleId('3'))));
     });
+
+    testWidgets('Converts colors to CSS', (WidgetTester tester) async {
+      final circles = {
+        Circle(
+          circleId: CircleId('1'),
+          fillColor: Color(0x7FFABADA),
+          strokeColor: Color(0xFFC0FFEE),
+        ),
+      };
+
+      controller.addCircles(circles);
+
+      final circle = controller.circles.values.first.circle;
+
+      expect(circle.get('fillColor'), '#fabada');
+      expect(circle.get('fillOpacity'), closeTo(0.5, _acceptableDelta));
+      expect(circle.get('strokeColor'), '#c0ffee');
+      expect(circle.get('strokeOpacity'), closeTo(1, _acceptableDelta));
+    });
   });
 
   group('PolygonsController', () {
@@ -144,6 +169,25 @@ void main() {
       expect(controller.polygons, contains(PolygonId('2')));
       expect(controller.polygons, isNot(contains(PolygonId('3'))));
     });
+
+    testWidgets('Converts colors to CSS', (WidgetTester tester) async {
+      final polygons = {
+        Polygon(
+          polygonId: PolygonId('1'),
+          fillColor: Color(0x7FFABADA),
+          strokeColor: Color(0xFFC0FFEE),
+        ),
+      };
+
+      controller.addPolygons(polygons);
+
+      final polygon = controller.polygons.values.first.polygon;
+
+      expect(polygon.get('fillColor'), '#fabada');
+      expect(polygon.get('fillOpacity'), closeTo(0.5, _acceptableDelta));
+      expect(polygon.get('strokeColor'), '#c0ffee');
+      expect(polygon.get('strokeOpacity'), closeTo(1, _acceptableDelta));
+    });
   });
 
   group('PolylinesController', () {
@@ -210,5 +254,21 @@ void main() {
       expect(controller.lines, contains(PolylineId('2')));
       expect(controller.lines, isNot(contains(PolylineId('3'))));
     });
+
+    testWidgets('Converts colors to CSS', (WidgetTester tester) async {
+      final lines = {
+        Polyline(
+          polylineId: PolylineId('1'),
+          color: Color(0x7FFABADA),
+        ),
+      };
+
+      controller.addPolylines(lines);
+
+      final line = controller.lines.values.first.line;
+
+      expect(line.get('strokeColor'), '#fabada');
+      expect(line.get('strokeOpacity'), closeTo(0.5, _acceptableDelta));
+    });
   });
 }