[mob][photos] Upgrade to flutter 3.22.0 (#1933)

## Description - Upgraded flutter and some packages. - `flutter_map` had some breaking changes. - `flutter_map_marker_cluster` also required some changes. - Marker clusters weren't rendering after upgrading to flutter 3.22.0 on profile and release mode. This was also fixed.
ente-io · May 31, 2024 · 05e4d18 · 05e4d18
2 parents 387ca79 + f14f973
commit 05e4d18
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 97 deletions.
diff --git a/.github/workflows/mobile-internal-release.yml b/.github/workflows/mobile-internal-release.yml
@@ -4,7 +4,7 @@ on:
     workflow_dispatch: # Allow manually running the action
 
 env:
-    FLUTTER_VERSION: "3.19.4"
+    FLUTTER_VERSION: "3.22.0"
 
 jobs:
     build:

diff --git a/.github/workflows/mobile-lint.yml b/.github/workflows/mobile-lint.yml
@@ -9,7 +9,8 @@ on:
             - ".github/workflows/mobile-lint.yml"
 
 env:
-    FLUTTER_VERSION: "3.19.4"
+
+    FLUTTER_VERSION: "3.22.0"
 
 jobs:
     lint:

diff --git a/mobile/README.md b/mobile/README.md
@@ -46,7 +46,7 @@ You can alternatively install the build from PlayStore or F-Droid.
 
 ## 🧑‍💻 Building from source
 
-1. [Install Flutter v3.19.4](https://flutter.dev/docs/get-started/install).
+1. [Install Flutter v3.22.0](https://flutter.dev/docs/get-started/install).
 
 2. Pull in all submodules with `git submodule update --init --recursive`
 

diff --git a/mobile/ios/Podfile.lock b/mobile/ios/Podfile.lock
@@ -427,7 +427,7 @@ SPEC CHECKSUMS:
   home_widget: 0434835a4c9a75704264feff6be17ea40e0f0d57
   image_editor_common: d6f6644ae4a6de80481e89fe6d0a8c49e30b4b43
   in_app_purchase_storekit: 0e4b3c2e43ba1e1281f4f46dd71b0593ce529892
-  integration_test: 13825b8a9334a850581300559b8839134b124670
+  integration_test: ce0a3ffa1de96d1a89ca0ac26fca7ea18a749ef4
   libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
   local_auth_darwin: c7e464000a6a89e952235699e32b329457608d98
   local_auth_ios: 5046a18c018dd973247a0564496c8898dbb5adf9

diff --git a/mobile/lib/ui/map/map_marker.dart b/mobile/lib/ui/map/map_marker.dart
@@ -7,20 +7,19 @@ import "package:photos/ui/map/marker_image.dart";
 
 Marker mapMarker(
   ImageMarker imageMarker,
-  String key, {
+  ValueKey<int> key, {
   Size markerSize = MapView.defaultMarkerSize,
 }) {
   return Marker(
-    //-6.5 is for taking in the height of the MarkerPointer
-    anchorPos: AnchorPos.exactly(Anchor(markerSize.height / 2, -6.5)),
-    key: Key(key),
+    alignment: Alignment.topCenter,
+    key: key,
     width: markerSize.width,
     height: markerSize.height,
     point: LatLng(
       imageMarker.latitude,
       imageMarker.longitude,
     ),
-    builder: (context) => MarkerImage(
+    child: MarkerImage(
       file: imageMarker.imageFile,
       seperator: (MapView.defaultMarkerSize.height + 10) -
           (MapView.defaultMarkerSize.height - markerSize.height),

diff --git a/mobile/lib/ui/map/map_screen.dart b/mobile/lib/ui/map/map_screen.dart
@@ -114,7 +114,7 @@ class _MapScreenState extends State<MapScreen> {
     );
 
     Timer(Duration(milliseconds: debounceDuration), () {
-      calculateVisibleMarkers(mapController.bounds!);
+      calculateVisibleMarkers(mapController.camera.visibleBounds);
       setState(() {
         isLoading = false;
       });

diff --git a/mobile/lib/ui/map/map_view.dart b/mobile/lib/ui/map/map_view.dart
@@ -4,8 +4,8 @@ import "package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart";
 import "package:latlong2/latlong.dart";
 import "package:photos/ui/map/image_marker.dart";
 import "package:photos/ui/map/map_button.dart";
-import 'package:photos/ui/map/map_gallery_tile.dart';
-import 'package:photos/ui/map/map_gallery_tile_badge.dart';
+import "package:photos/ui/map/map_gallery_tile.dart";
+import "package:photos/ui/map/map_gallery_tile_badge.dart";
 import "package:photos/ui/map/map_marker.dart";
 import "package:photos/ui/map/tile/layers.dart";
 import "package:photos/utils/debouncer.dart";
@@ -60,11 +60,6 @@ class _MapViewState extends State<MapView> {
     _markers = _buildMakers();
   }
 
-  @override
-  void dispose() {
-    super.dispose();
-  }
-
   void onChange(LatLngBounds bounds) {
     _debouncer.run(
       () async {
@@ -85,55 +80,44 @@ class _MapViewState extends State<MapView> {
                     widget.onTap!.call();
                   }
                 : null,
-            center: widget.center,
+            initialCenter: widget.center,
             minZoom: widget.minZoom,
             maxZoom: widget.maxZoom,
-            enableMultiFingerGestureRace: true,
-            zoom: widget.initialZoom,
-            maxBounds: LatLngBounds(
-              const LatLng(-90, -180),
-              const LatLng(90, 180),
+            interactionOptions: InteractionOptions(
+              flags: widget.interactiveFlags,
+              enableMultiFingerGestureRace: true,
+            ),
+            initialZoom: widget.initialZoom,
+            cameraConstraint: CameraConstraint.contain(
+              bounds: LatLngBounds(
+                const LatLng(-90, -180),
+                const LatLng(90, 180),
+              ),
             ),
             onPositionChanged: (position, hasGesture) {
               if (position.bounds != null) {
                 onChange(position.bounds!);
               }
             },
-            interactiveFlags: widget.interactiveFlags,
           ),
-          nonRotatedChildren: [
-            Padding(
-              padding: EdgeInsets.only(
-                bottom: widget.bottomSheetDraggableAreaHeight,
-              ),
-              child: OSMFranceTileAttributes(
-                options: widget.mapAttributionOptions,
-              ),
-            ),
-          ],
           children: [
             const OSMFranceTileLayer(),
             MarkerClusterLayerWidget(
               options: MarkerClusterLayerOptions(
-                anchorPos: AnchorPos.align(AnchorAlign.top),
+                alignment: Alignment.topCenter,
                 maxClusterRadius: 100,
                 showPolygon: false,
                 size: widget.markerSize,
-                fitBoundsOptions: const FitBoundsOptions(
-                  padding: EdgeInsets.all(80),
-                ),
+                padding: const EdgeInsets.all(80),
                 markers: _markers,
                 onClusterTap: (_) {
-                  onChange(widget.controller.bounds!);
+                  onChange(widget.controller.camera.visibleBounds);
                 },
                 builder: (context, List<Marker> markers) {
-                  final index = int.parse(
-                    markers.first.key
-                        .toString()
-                        .replaceAll(RegExp(r'[^0-9]'), ''),
-                  );
-                  final String clusterKey =
-                      'map-badge-$index-len-${markers.length}';
+                  final valueKey = markers.first.key as ValueKey;
+                  final index = valueKey.value as int;
+
+                  final clusterKey = 'map-badge-$index-len-${markers.length}';
 
                   return Stack(
                     key: ValueKey(clusterKey),
@@ -148,6 +132,14 @@ class _MapViewState extends State<MapView> {
                 },
               ),
             ),
+            Padding(
+              padding: EdgeInsets.only(
+                bottom: widget.bottomSheetDraggableAreaHeight,
+              ),
+              child: OSMFranceTileAttributes(
+                options: widget.mapAttributionOptions,
+              ),
+            ),
           ],
         ),
         widget.showControls
@@ -175,8 +167,8 @@ class _MapViewState extends State<MapView> {
                       icon: Icons.add,
                       onPressed: () {
                         widget.controller.move(
-                          widget.controller.center,
-                          widget.controller.zoom + 1,
+                          widget.controller.camera.center,
+                          widget.controller.camera.zoom + 1,
                         );
                       },
                       heroTag: 'zoom-in',
@@ -185,8 +177,8 @@ class _MapViewState extends State<MapView> {
                       icon: Icons.remove,
                       onPressed: () {
                         widget.controller.move(
-                          widget.controller.center,
-                          widget.controller.zoom - 1,
+                          widget.controller.camera.center,
+                          widget.controller.camera.zoom - 1,
                         );
                       },
                       heroTag: 'zoom-out',
@@ -204,7 +196,7 @@ class _MapViewState extends State<MapView> {
       final imageMarker = widget.imageMarkers[index];
       return mapMarker(
         imageMarker,
-        index.toString(),
+        ValueKey(index),
         markerSize: widget.markerSize,
       );
     });

diff --git a/mobile/lib/ui/map/tile/attribution/map_attribution.dart b/mobile/lib/ui/map/tile/attribution/map_attribution.dart
@@ -3,7 +3,7 @@
 import "dart:async";
 
 import "package:flutter/material.dart";
-import "package:flutter_map/plugin_api.dart";
+import "package:flutter_map/flutter_map.dart";
 import "package:photos/extensions/list.dart";
 import "package:photos/theme/colors.dart";
 import "package:photos/theme/ente_theme.dart";
@@ -194,10 +194,8 @@ class MapAttributionWidgetState extends State<MapAttributionWidget> {
                 context,
                 () {
                   setState(() => popupExpanded = true);
-                  mapEventSubscription = FlutterMapState.of(context)
-                      .mapController
-                      .mapEventStream
-                      .listen((e) {
+                  mapEventSubscription =
+                      MapController().mapEventStream.listen((e) {
                     setState(() => popupExpanded = false);
                     mapEventSubscription?.cancel();
                   });