[google_maps_flutter] Custom marker size improvements (#4055)

This PR adds and improves marker scaling support for Android, iOS and Web. With this change, custom marker icons are drawn with same logical size on all platforms, keeping the visual style as close as possible. This PR is created from previous PR: flutter/plugins#6805 To avoid breaking change, this PR makes the following changes while keeping the old behavior intact: - Deprecates BitmapDescriptor.fromAssetImage in favor of BitmapDescriptor.asset and AssetMapBitmap - Deprecates BitmapDescriptor.fromBytes in favor of BitmapDescriptor.bytes and BytesMapBitmap **Android:** <img width="350" alt="Android Screenshot" src="https://github.com/flutter/packages/assets/5219613/a5b9d57b-5f6e-4c17-8f60-f397b2cf21f4"> **iOS:** <img width="350" alt="iOS Screenshot" src="https://github.com/flutter/packages/assets/5219613/5edf9fc8-91c7-4927-a158-e71ab3081b96"> **Web:** <img width="350" alt="Web Screenshot" src="https://github.com/flutter/packages/assets/5219613/74fb2ea0-deff-4bc7-94b3-fa4aa5d6bfd5"> Resolves flutter/flutter#34657
flutter · Jun 5, 2024 · 3885ac2 · 3885ac2
1 parent 5183cac
commit 3885ac2
Show file tree

Hide file tree

Showing 11 changed files with 509 additions and 66 deletions.
diff --git a/packages/google_maps_flutter/google_maps_flutter/AUTHORS b/packages/google_maps_flutter/google_maps_flutter/AUTHORS
@@ -65,3 +65,4 @@ Anton Borries <[email protected]>
 Alex Li <[email protected]>
 Rahul Raj <[email protected]>
 Taha Tesser <[email protected]>
+Joonas Kerttula <[email protected]>
diff --git a/packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md b/packages/google_maps_flutter/google_maps_flutter/CHANGELOG.md
@@ -1,6 +1,7 @@
-## NEXT
+## 2.7.0
 
-* Updates minimum supported SDK version to Flutter 3.16/Dart 3.2.
+* Adds support for BitmapDescriptor classes `AssetMapBitmap` and `BytesMapBitmap`.
+* Updates minimum supported SDK version to Flutter 3.22/Dart 3.4.
 
 ## 2.6.1
 

diff --git a/...google_maps_flutter/google_maps_flutter/example/integration_test/src/maps_controller.dart b/...google_maps_flutter/google_maps_flutter/example/integration_test/src/maps_controller.dart
@@ -3,13 +3,15 @@
 // found in the LICENSE file.
 
 import 'dart:async';
+import 'dart:convert';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:integration_test/integration_test.dart';
 
+import 'resources/icon_image_base64.dart';
 import 'shared.dart';
 
 /// Integration Tests that only need a standard [GoogleMapController].
@@ -401,6 +403,112 @@ void runTests() {
     expect(iwVisibleStatus, false);
   });
 
+  testWidgets('markerWithAssetMapBitmap', (WidgetTester tester) async {
+    final Set<Marker> markers = <Marker>{
+      Marker(
+          markerId: const MarkerId('1'),
+          icon: AssetMapBitmap(
+            'assets/red_square.png',
+            imagePixelRatio: 1.0,
+          )),
+    };
+    await pumpMap(
+      tester,
+      GoogleMap(
+        initialCameraPosition: const CameraPosition(target: LatLng(10.0, 15.0)),
+        markers: markers,
+      ),
+    );
+  });
+
+  testWidgets('markerWithAssetMapBitmapCreate', (WidgetTester tester) async {
+    final ImageConfiguration imageConfiguration = ImageConfiguration(
+      devicePixelRatio: tester.view.devicePixelRatio,
+    );
+    final Set<Marker> markers = <Marker>{
+      Marker(
+          markerId: const MarkerId('1'),
+          icon: await AssetMapBitmap.create(
+            imageConfiguration,
+            'assets/red_square.png',
+          )),
+    };
+    await pumpMap(
+      tester,
+      GoogleMap(
+        initialCameraPosition: const CameraPosition(target: LatLng(10.0, 15.0)),
+        markers: markers,
+      ),
+    );
+  });
+
+  testWidgets('markerWithBytesMapBitmap', (WidgetTester tester) async {
+    final Uint8List bytes = const Base64Decoder().convert(iconImageBase64);
+    final Set<Marker> markers = <Marker>{
+      Marker(
+        markerId: const MarkerId('1'),
+        icon: BytesMapBitmap(
+          bytes,
+          imagePixelRatio: tester.view.devicePixelRatio,
+        ),
+      ),
+    };
+    await pumpMap(
+      tester,
+      GoogleMap(
+        initialCameraPosition: const CameraPosition(target: LatLng(10.0, 15.0)),
+        markers: markers,
+      ),
+    );
+  });
+
+  testWidgets('markerWithLegacyAsset', (WidgetTester tester) async {
+    tester.view.devicePixelRatio = 2.0;
+    final ImageConfiguration imageConfiguration = ImageConfiguration(
+      devicePixelRatio: tester.view.devicePixelRatio,
+      size: const Size(100, 100),
+    );
+    final Set<Marker> markers = <Marker>{
+      Marker(
+          markerId: const MarkerId('1'),
+          icon: await BitmapDescriptor.fromAssetImage(
+            imageConfiguration,
+            'assets/red_square.png',
+          )),
+    };
+    await pumpMap(
+      tester,
+      GoogleMap(
+        initialCameraPosition: const CameraPosition(target: LatLng(10.0, 15.0)),
+        markers: markers,
+      ),
+    );
+
+    await tester.pumpAndSettle();
+  });
+
+  testWidgets('markerWithLegacyBytes', (WidgetTester tester) async {
+    tester.view.devicePixelRatio = 2.0;
+    final Uint8List bytes = const Base64Decoder().convert(iconImageBase64);
+    final Set<Marker> markers = <Marker>{
+      Marker(
+          markerId: const MarkerId('1'),
+          icon: BitmapDescriptor.fromBytes(
+            bytes,
+            size: const Size(100, 100),
+          )),
+    };
+    await pumpMap(
+      tester,
+      GoogleMap(
+        initialCameraPosition: const CameraPosition(target: LatLng(10.0, 15.0)),
+        markers: markers,
+      ),
+    );
+
+    await tester.pumpAndSettle();
+  });
+
   testWidgets('testTakeSnapshot', (WidgetTester tester) async {
     final Completer<GoogleMapController> controllerCompleter =
         Completer<GoogleMapController>();

diff --git a/...utter/google_maps_flutter/example/integration_test/src/resources/icon_image.png b/...utter/google_maps_flutter/example/integration_test/src/resources/icon_image.png
diff --git a/...flutter/google_maps_flutter/example/integration_test/src/resources/icon_image_base64.dart b/...flutter/google_maps_flutter/example/integration_test/src/resources/icon_image_base64.dart
@@ -0,0 +1,49 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/// This constant holds the base64-encoded data of a 16x16 PNG image of the
+/// Flutter logo.
+///
+/// See `icon_image.png` source in the same directory.
+///
+/// To create or update this image, follow these steps:
+/// 1. Create or update a 16x16 PNG image.
+/// 2. Convert the image to a base64 string using a script below.
+/// 3. Replace the existing base64 string below with the new one.
+///
+/// Example of converting an image to base64 in Dart:
+/// ```dart
+/// import 'dart:convert';
+/// import 'dart:io';
+///
+/// void main() async {
+///   final bytes = await File('icon_image.png').readAsBytes();
+///   final base64String = base64Encode(bytes);
+///   print(base64String);
+/// }
+/// ```
+const String iconImageBase64 =
+    'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIRlWElmTU'
+    '0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIA'
+    'AIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQ'
+    'AAABCgAwAEAAAAAQAAABAAAAAAx28c8QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1M'
+    'OmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIH'
+    'g6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8v'
+    'd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcm'
+    'lwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFk'
+    'b2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk'
+    '9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6'
+    'eG1wbWV0YT4KTMInWQAAAplJREFUOBF1k01ME1EQx2fe7tIPoGgTE6AJgQQSPaiH9oAtkFbsgX'
+    'jygFcT0XjSkxcTDxtPJh6MR28ePMHBBA8cNLSIony0oBhEMVETP058tE132+7uG3cW24DAXN57'
+    '2fn9/zPz3iIcEdEl0nIxtNLr1IlVeoMadkubKmoL+u2SzAV8IjV5Ekt4GN+A8+VOUPwLarOI2G'
+    'Vpqq0i4JQorwQxPtWHVZ1IKP8LNGDXGaSyqARFxDGo7MJBy4XVf3AyQ+qTHnTEXoF9cFUy3OkY'
+    '0oWxmWFtD5xNoc1sQ6AOn1+hCNTkkhKow8KFZV77tVs2O9dhFvBm0IA/U0RhZ7/ocEx23oUDlh'
+    'h8HkNjZIN8Lb3gOU8gOp7AKJHCB2/aNZkTftHumNzzbtl2CBPZHqxw8mHhVZBeoz6w5DvhE2FZ'
+    'lQYPjKdd2/qRyKZ6KsPv7TEk7EYEk0A0EUmJduHRy1i4oLKqgmC59ZggAdwrC9pFuWy1iUT2rA'
+    'uv0h2UdNtNqxCBBkgqorjOMOgksN7CxQ90vEb00U3c3LIwyo9o8FXxQVNr8Coqyk+S5EPBXnjt'
+    'xRmc4TegI7qWbvBkeeUbGMnTCd4nZnYeDOWIEtlC6cKK/JJepY3hZSvN33jovO6L0XFqPKqBTO'
+    'FuapUoPr1lxDM7cmC2TAOz25cYSGa++feBew/cjpc0V+mNT29/HZp3KDFTNLvuTRPEHy5065lj'
+    'Xn4y41XM+wP/AlcycRmdc3MUhvLm/J/ceu/3qUVT62oP2EZpjSylHybHSpDUVcjq9gEBVo0+Xt'
+    'JyN2IWRO+3QUforRoKnZLVsglaMECW+YmMSj9M3SrC6Lg71CMiqWfUrJ6ywzefhnZ+G69BaKdB'
+    'WhXQAn6wzDUpfUPw7MrmX/WhbfmKblw+AAAAAElFTkSuQmCC';
diff --git a/packages/google_maps_flutter/google_maps_flutter/example/lib/custom_marker_icon.dart b/packages/google_maps_flutter/google_maps_flutter/example/lib/custom_marker_icon.dart
@@ -0,0 +1,56 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+
+/// Returns a generated png image in [ByteData] format with the requested size.
+Future<ByteData> createCustomMarkerIconImage({required Size size}) async {
+  final ui.PictureRecorder recorder = ui.PictureRecorder();
+  final Canvas canvas = Canvas(recorder);
+  final _MarkerPainter painter = _MarkerPainter();
+
+  painter.paint(canvas, size);
+
+  final ui.Image image = await recorder
+      .endRecording()
+      .toImage(size.width.floor(), size.height.floor());
+
+  final ByteData? bytes =
+      await image.toByteData(format: ui.ImageByteFormat.png);
+  return bytes!;
+}
+
+class _MarkerPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Rect rect = Offset.zero & size;
+    const RadialGradient gradient = RadialGradient(
+      colors: <Color>[Colors.yellow, Colors.red],
+      stops: <double>[0.4, 1.0],
+    );
+
+    // Draw radial gradient
+    canvas.drawRect(
+      rect,
+      Paint()..shader = gradient.createShader(rect),
+    );
+
+    // Draw diagonal black line
+    canvas.drawLine(
+      Offset.zero,
+      Offset(size.width, size.height),
+      Paint()
+        ..color = Colors.black
+        ..strokeWidth = 1,
+    );
+  }
+
+  @override
+  bool shouldRepaint(_MarkerPainter oldDelegate) => false;
+  @override
+  bool shouldRebuildSemantics(_MarkerPainter oldDelegate) => false;
+}