feat: Disable gestures on the KP map (openfoodfacts#6081)

* Disable gestures on the KP map * World map * Remove warning
g123k · Dec 30, 2024 · 7a02b57 · 7a02b57
1 parent 33101fd
commit 7a02b57
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 34 deletions.
diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_card.dart
@@ -31,6 +31,7 @@ class KnowledgePanelCard extends StatelessWidget {
     final UserPreferences userPreferences = context.watch<UserPreferences>();
     final KnowledgePanel? panel =
         KnowledgePanelsBuilder.getKnowledgePanel(product, panelId);
+
     if (panel == null) {
       return EMPTY_WIDGET;
     }

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_expanded_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_expanded_card.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
+import 'package:provider/provider.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/knowledge_panel/knowledge_panels_builder.dart';
 
@@ -47,9 +48,13 @@ class KnowledgePanelExpandedCard extends StatelessWidget {
         }
       }
     }
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: elementWidgets,
+    return Provider<KnowledgePanel>(
+      lazy: true,
+      create: (_) => panel,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: elementWidgets,
+      ),
     );
   }
 

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_world_map_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_world_map_card.dart
@@ -3,8 +3,10 @@ import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'package:latlong2/latlong.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
+import 'package:provider/provider.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/helpers/launch_url_helper.dart';
+import 'package:smooth_app/pages/product/world_map_page.dart';
 
 class KnowledgePanelWorldMapCard extends StatelessWidget {
   const KnowledgePanelWorldMapCard(this.mapElement);
@@ -20,6 +22,7 @@ class KnowledgePanelWorldMapCard extends StatelessWidget {
     const double markerSize = 30;
     final List<Marker> markers = <Marker>[];
     final List<LatLng> coordinates = <LatLng>[];
+
     void addCoordinate(final LatLng latLng) {
       coordinates.add(latLng);
       markers.add(
@@ -40,51 +43,102 @@ class KnowledgePanelWorldMapCard extends StatelessWidget {
       }
     }
 
+    final MapOptions mapOptions = _generateMapOptions(
+      coordinates: coordinates,
+      markerSize: markerSize,
+      interactive: false,
+    );
+
+    final List<Widget> children = <Widget>[
+      TileLayer(
+        urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        userAgentPackageName: 'org.openfoodfacts.app',
+      ),
+      MarkerLayer(markers: markers),
+      RichAttributionWidget(
+        animationConfig: const ScaleRAWA(),
+        showFlutterMapAttribution: false,
+        attributions: <SourceAttribution>[
+          TextSourceAttribution(
+            'OpenStreetMap contributors',
+            onTap: () => LaunchUrlHelper.launchURL(
+              'https://www.openstreetmap.org/copyright',
+            ),
+          ),
+        ],
+      ),
+    ];
+
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(bottom: MEDIUM_SPACE),
+      child: SizedBox(
+        height: 200,
+        child: InkWell(
+          onTap: () {
+            Navigator.of(context).push(
+              MaterialPageRoute<Widget>(
+                builder: (_) => WorldMapPage(
+                  title: _getTitle(context),
+                  mapOptions: _generateMapOptions(
+                    coordinates: coordinates,
+                    markerSize: markerSize,
+                    initialZoom: 12.0,
+                    interactive: true,
+                  ),
+                  children: children,
+                ),
+              ),
+            );
+          },
+          child: IgnorePointer(
+            ignoring: true,
+            child: FlutterMap(
+              options: mapOptions,
+              children: children,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  MapOptions _generateMapOptions({
+    required List<LatLng> coordinates,
+    required double markerSize,
+    double initialZoom = 6.0,
+    bool interactive = false,
+  }) {
     final MapOptions mapOptions;
     if (coordinates.length == 1) {
       mapOptions = MapOptions(
         initialCenter: coordinates.first,
-        initialZoom: 6.0,
+        initialZoom: initialZoom,
+        interactionOptions: InteractionOptions(
+          flags: interactive ? InteractiveFlag.all : InteractiveFlag.none,
+        ),
       );
     } else {
       mapOptions = MapOptions(
         initialCameraFit: CameraFit.coordinates(
           coordinates: coordinates,
           maxZoom: 13.0,
           forceIntegerZoomLevel: true,
-          padding: const EdgeInsets.all(markerSize),
+          padding: EdgeInsets.all(markerSize),
+        ),
+        interactionOptions: InteractionOptions(
+          flags: interactive ? InteractiveFlag.all : InteractiveFlag.none,
         ),
       );
     }
-    return Padding(
-      padding: const EdgeInsetsDirectional.only(bottom: MEDIUM_SPACE),
-      child: SizedBox(
-        height: 200,
-        child: FlutterMap(
-          options: mapOptions,
-          children: <Widget>[
-            TileLayer(
-              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-              userAgentPackageName: 'org.openfoodfacts.app',
-            ),
-            MarkerLayer(markers: markers),
-            RichAttributionWidget(
-              popupInitialDisplayDuration: const Duration(seconds: 5),
-              animationConfig: const ScaleRAWA(),
-              showFlutterMapAttribution: false,
-              attributions: <SourceAttribution>[
-                TextSourceAttribution(
-                  'OpenStreetMap contributors',
-                  onTap: () => LaunchUrlHelper.launchURL(
-                    'https://www.openstreetmap.org/copyright',
-                  ),
-                ),
-              ],
-            ),
-          ],
-        ),
-      ),
-    );
+    return mapOptions;
+  }
+
+  String? _getTitle(BuildContext context) {
+    try {
+      return context.read<KnowledgePanel>().titleElement?.title;
+    } catch (_) {
+      return null;
+    }
   }
 
   @override

diff --git a/packages/smooth_app/lib/pages/product/world_map_page.dart b/packages/smooth_app/lib/pages/product/world_map_page.dart
@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:smooth_app/widgets/smooth_scaffold.dart';
+
+class WorldMapPage extends StatelessWidget {
+  const WorldMapPage({
+    required this.title,
+    required this.mapOptions,
+    required this.children,
+    super.key,
+  });
+
+  final String? title;
+  final MapOptions mapOptions;
+  final List<Widget> children;
+
+  @override
+  Widget build(BuildContext context) {
+    return SmoothScaffold(
+      appBar: AppBar(
+        title: Text(title ?? ''),
+        backgroundColor:
+            AppBarTheme.of(context).backgroundColor?.withValues(alpha: 0.8),
+      ),
+      extendBodyBehindAppBar: true,
+      body: FlutterMap(
+        options: mapOptions,
+        children: children,
+      ),
+    );
+  }
+}