feat(map in info): show a basic map in file info

lib/ui/components/info_item_widget.dart

@@ -8,6 +8,7 @@ class InfoItemWidget extends StatelessWidget {
   final IconData leadingIcon;
   final VoidCallback? editOnTap;
   final String? title;
+  final Widget? middleSection;
   final Future<List<Widget>> subtitleSection;
   final bool hasChipButtons;
   final VoidCallback? onTap;
@@ -15,6 +16,7 @@ class InfoItemWidget extends StatelessWidget {
     required this.leadingIcon,
     this.editOnTap,
     this.title,
+    this.middleSection,
     required this.subtitleSection,
     this.hasChipButtons = false,
     this.onTap,
@@ -36,6 +38,8 @@ class InfoItemWidget extends StatelessWidget {
       ]);
     }
 
+    middleSection != null ? children.add(middleSection!) : null;
+
     children.addAll([
       Flexible(
         child: FutureBuilder(

lib/ui/map/map_view.dart

@@ -20,6 +20,8 @@ class MapView extends StatefulWidget {
   final double initialZoom;
   final int debounceDuration;
   final double bottomSheetDraggableAreaHeight;
+  final bool showControls;
+  final int interactiveFlags;
 
   const MapView({
     Key? key,
@@ -32,6 +34,8 @@ class MapView extends StatefulWidget {
     required this.initialZoom,
     required this.debounceDuration,
     required this.bottomSheetDraggableAreaHeight,
+    this.interactiveFlags = InteractiveFlag.all,
+    this.showControls = true,
   }) : super(key: key);
 
   @override
@@ -85,6 +89,7 @@ class _MapViewState extends State<MapView> {
                 onChange(position.bounds!);
               }
             },
+            interactiveFlags: widget.interactiveFlags,
           ),
           nonRotatedChildren: [
             Padding(
@@ -133,47 +138,51 @@ class _MapViewState extends State<MapView> {
             ),
           ],
         ),
-        Positioned(
-          top: 4,
-          left: 10,
-          child: SafeArea(
-            child: MapButton(
-              icon: Icons.arrow_back,
-              onPressed: () {
-                Navigator.pop(context);
-              },
-              heroTag: 'back',
-            ),
-          ),
-        ),
-        Positioned(
-          bottom: widget.bottomSheetDraggableAreaHeight + 10,
-          right: 10,
-          child: Column(
-            children: [
-              MapButton(
-                icon: Icons.add,
-                onPressed: () {
-                  widget.controller.move(
-                    widget.controller.center,
-                    widget.controller.zoom + 1,
-                  );
-                },
-                heroTag: 'zoom-in',
-              ),
-              MapButton(
-                icon: Icons.remove,
-                onPressed: () {
-                  widget.controller.move(
-                    widget.controller.center,
-                    widget.controller.zoom - 1,
-                  );
-                },
-                heroTag: 'zoom-out',
-              ),
-            ],
-          ),
-        ),
+        widget.showControls
+            ? Positioned(
+                top: 4,
+                left: 10,
+                child: SafeArea(
+                  child: MapButton(
+                    icon: Icons.arrow_back,
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                    heroTag: 'back',
+                  ),
+                ),
+              )
+            : const SizedBox.shrink(),
+        widget.showControls
+            ? Positioned(
+                bottom: widget.bottomSheetDraggableAreaHeight + 10,
+                right: 10,
+                child: Column(
+                  children: [
+                    MapButton(
+                      icon: Icons.add,
+                      onPressed: () {
+                        widget.controller.move(
+                          widget.controller.center,
+                          widget.controller.zoom + 1,
+                        );
+                      },
+                      heroTag: 'zoom-in',
+                    ),
+                    MapButton(
+                      icon: Icons.remove,
+                      onPressed: () {
+                        widget.controller.move(
+                          widget.controller.center,
+                          widget.controller.zoom - 1,
+                        );
+                      },
+                      heroTag: 'zoom-out',
+                    ),
+                  ],
+                ),
+              )
+            : const SizedBox.shrink(),
       ],
     );
   }
@@ -181,7 +190,10 @@ class _MapViewState extends State<MapView> {
   List<Marker> _buildMakers() {
     return List<Marker>.generate(widget.imageMarkers.length, (index) {
       final imageMarker = widget.imageMarkers[index];
-      return mapMarker(imageMarker, index.toString());
+      return mapMarker(
+        imageMarker,
+        index.toString(),
+      );
     });
   }
 }

lib/ui/viewer/file_details/location_tags_widget.dart

@@ -1,6 +1,8 @@
 import "dart:async";
 
 import "package:flutter/material.dart";
+import "package:flutter_map/flutter_map.dart";
+import "package:latlong2/latlong.dart";
 import "package:photos/core/event_bus.dart";
 import "package:photos/events/location_tag_updated_event.dart";
 import "package:photos/generated/l10n.dart";
@@ -10,6 +12,8 @@ import "package:photos/states/location_screen_state.dart";
 import "package:photos/theme/ente_theme.dart";
 import "package:photos/ui/components/buttons/chip_button_widget.dart";
 import "package:photos/ui/components/info_item_widget.dart";
+import "package:photos/ui/map/image_marker.dart";
+import "package:photos/ui/map/map_view.dart";
 import 'package:photos/ui/viewer/location/add_location_sheet.dart';
 import "package:photos/ui/viewer/location/location_screen.dart";
 import "package:photos/utils/navigation_util.dart";
@@ -58,6 +62,40 @@ class _LocationTagsWidgetState extends State<LocationTagsWidget> {
         subtitleSection: locationTagChips,
         hasChipButtons: hasChipButtons ?? true,
         onTap: onTap,
+        // middleSection: SizedBox(
+        //   height: 150,
+        //   width: 300,
+        //   child: MapScreen(
+        //     filesFutureFn: () => Future.value([widget.file]),
+        //     showGallery: false,
+        //   ),
+        // ),
+        middleSection: SizedBox(
+          height: 150,
+          width: 300,
+          child: MapView(
+            updateVisibleImages: () {},
+            imageMarkers: [
+              ImageMarker(
+                imageFile: widget.file,
+                latitude: widget.file.location!.latitude!,
+                longitude: widget.file.location!.longitude!,
+              ),
+            ],
+            controller: MapController(),
+            center: LatLng(
+              widget.file.location!.latitude!,
+              widget.file.location!.longitude!,
+            ),
+            minZoom: 7,
+            maxZoom: 7,
+            initialZoom: 7,
+            debounceDuration: 0,
+            bottomSheetDraggableAreaHeight: 0,
+            showControls: false,
+            interactiveFlags: InteractiveFlag.none,
+          ),
+        ),
 
         /// to be used when state issues are fixed when location is updated
         // editOnTap: widget.file.ownerID == Configuration.instance.getUserID()!