info: fixed map layout

lib/widgets/fullscreen/info/location_section.dart

@@ -6,7 +6,7 @@ import 'package:aves/utils/geo_utils.dart';
 import 'package:aves/widgets/common/aves_filter_chip.dart';
 import 'package:aves/widgets/common/icons.dart';
 import 'package:aves/widgets/fullscreen/info/info_page.dart';
-import 'package:aves/widgets/fullscreen/info/maps/buttons.dart';
+import 'package:aves/widgets/fullscreen/info/maps/common.dart';
 import 'package:aves/widgets/fullscreen/info/maps/google_map.dart';
 import 'package:aves/widgets/fullscreen/info/maps/leaflet_map.dart';
 import 'package:flutter/material.dart';

lib/widgets/fullscreen/info/maps/common.dart

@@ -7,11 +7,36 @@ import 'package:aves/widgets/fullscreen/info/location_section.dart';
 import 'package:aves/widgets/fullscreen/overlay/common.dart';
 import 'package:flutter/material.dart';
 
+class MapDecorator extends StatelessWidget {
+  final Widget child;
+
+  static const BorderRadius mapBorderRadius = BorderRadius.all(Radius.circular(24)); // to match button circles
+
+  const MapDecorator({@required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onScaleStart: (details) {
+        // absorb scale gesture here to prevent scrolling
+        // and triggering by mistake a move to the image page above
+      },
+      child: ClipRRect(
+        borderRadius: mapBorderRadius,
+        child: Container(
+          color: Colors.white70,
+          height: 200,
+          child: child,
+        ),
+      ),
+    );
+  }
+}
+
 class MapButtonPanel extends StatelessWidget {
   final String geoUri;
   final void Function(double amount) zoomBy;
 
-  static const BorderRadius mapBorderRadius = BorderRadius.all(Radius.circular(24)); // to match button circles
   static const double padding = 4;
 
   const MapButtonPanel({

lib/widgets/fullscreen/info/maps/google_map.dart

@@ -1,5 +1,5 @@
 import 'package:aves/model/settings.dart';
-import 'package:aves/widgets/fullscreen/info/maps/buttons.dart';
+import 'package:aves/widgets/fullscreen/info/maps/common.dart';
 import 'package:flutter/material.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:tuple/tuple.dart';
@@ -45,57 +45,44 @@ class EntryGoogleMapState extends State<EntryGoogleMap> with AutomaticKeepAliveC
     super.build(context);
     return Stack(
       children: [
-        _buildMap(),
+        MapDecorator(
-        Positioned.fill(
+          child: _buildMap(),
-          child: Align(
+        ),
-            alignment: AlignmentDirectional.centerEnd,
+        MapButtonPanel(
-            child: MapButtonPanel(
+          geoUri: widget.geoUri,
-              geoUri: widget.geoUri,
+          zoomBy: _zoomBy,
-              zoomBy: _zoomBy,
+        ),
-            ),
-          ),
-        )
       ],
     );
   }
 
   Widget _buildMap() {
     final accentHue = HSVColor.fromColor(Theme.of(context).accentColor).hue;
-    return GestureDetector(
+    return GoogleMap(
-      onScaleStart: (details) {
+      // GoogleMap init perf issue: https://github.com/flutter/flutter/issues/28493
-        // absorb scale gesture here to prevent scrolling
+      initialCameraPosition: CameraPosition(
-        // and triggering by mistake a move to the image page above
+        target: widget.latLng,
-      },
+        zoom: widget.initialZoom,
-      child: ClipRRect(
-        borderRadius: MapButtonPanel.mapBorderRadius,
-        child: Container(
-          color: Colors.white70,
-          height: 200,
-          child: GoogleMap(
-            // GoogleMap init perf issue: https://github.com/flutter/flutter/issues/28493
-            initialCameraPosition: CameraPosition(
-              target: widget.latLng,
-              zoom: widget.initialZoom,
-            ),
-            onMapCreated: (controller) => setState(() => _controller = controller),
-            rotateGesturesEnabled: false,
-            scrollGesturesEnabled: false,
-            zoomControlsEnabled: false,
-            zoomGesturesEnabled: false,
-            liteModeEnabled: false,
-            tiltGesturesEnabled: false,
-            myLocationEnabled: false,
-            myLocationButtonEnabled: false,
-            markers: {
-              Marker(
-                markerId: MarkerId(widget.markerId),
-                icon: BitmapDescriptor.defaultMarkerWithHue(accentHue),
-                position: widget.latLng,
-              )
-            },
-          ),
-        ),
       ),
+      onMapCreated: (controller) => setState(() => _controller = controller),
+      compassEnabled: false,
+      mapToolbarEnabled: false,
+      rotateGesturesEnabled: false,
+      scrollGesturesEnabled: false,
+      zoomControlsEnabled: false,
+      zoomGesturesEnabled: false,
+      liteModeEnabled: false,
+      // no camera animation in lite mode
+      tiltGesturesEnabled: false,
+      myLocationEnabled: false,
+      myLocationButtonEnabled: false,
+      markers: {
+        Marker(
+          markerId: MarkerId(widget.markerId),
+          icon: BitmapDescriptor.defaultMarkerWithHue(accentHue),
+          position: widget.latLng,
+        )
+      },
     );
   }
 

lib/widgets/fullscreen/info/maps/leaflet_map.dart

@@ -1,5 +1,5 @@
 import 'package:aves/model/settings.dart';
-import 'package:aves/widgets/fullscreen/info/maps/buttons.dart';
+import 'package:aves/widgets/fullscreen/info/maps/common.dart';
 import 'package:aves/widgets/fullscreen/info/maps/scale_layer.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
@@ -50,7 +50,9 @@ class EntryLeafletMapState extends State<EntryLeafletMap> with AutomaticKeepAliv
       children: [
         Stack(
           children: [
-            _buildMap(),
+            MapDecorator(
+              child: _buildMap(),
+            ),
             MapButtonPanel(
               geoUri: widget.geoUri,
               zoomBy: _zoomBy,
@@ -63,51 +65,38 @@ class EntryLeafletMapState extends State<EntryLeafletMap> with AutomaticKeepAliv
   }
 
   Widget _buildMap() {
-    return GestureDetector(
+    return FlutterMap(
-      onScaleStart: (details) {
+      options: MapOptions(
-        // absorb scale gesture here to prevent scrolling
+        center: widget.latLng,
-        // and triggering by mistake a move to the image page above
+        zoom: widget.initialZoom,
-      },
+        interactive: false,
-      child: ClipRRect(
+      ),
-        borderRadius: MapButtonPanel.mapBorderRadius,
+      children: [
-        child: Container(
+        _buildMapLayer(),
-          color: Colors.white70,
+        ScaleLayerWidget(
-          height: 200,
+          options: ScaleLayerOptions(),
-          child: FlutterMap(
+        ),
-            options: MapOptions(
+        MarkerLayerWidget(
-              center: widget.latLng,
+          options: MarkerLayerOptions(
-              zoom: widget.initialZoom,
+            markers: [
-              interactive: false,
+              Marker(
-            ),
+                width: markerSize,
-            children: [
+                height: markerSize,
-              _buildMapLayer(),
+                point: widget.latLng,
-              ScaleLayerWidget(
+                builder: (ctx) {
-                options: ScaleLayerOptions(),
+                  return Icon(
-              ),
+                    Icons.place,
-              MarkerLayerWidget(
+                    size: markerSize,
-                options: MarkerLayerOptions(
+                    color: Theme.of(context).accentColor,
-                  markers: [
+                  );
-                    Marker(
+                },
-                      width: markerSize,
+                anchorPos: AnchorPos.align(AnchorAlign.top),
-                      height: markerSize,
-                      point: widget.latLng,
-                      builder: (ctx) {
-                        return Icon(
-                          Icons.place,
-                          size: markerSize,
-                          color: Theme.of(context).accentColor,
-                        );
-                      },
-                      anchorPos: AnchorPos.align(AnchorAlign.top),
-                    ),
-                  ],
-                ),
               ),
             ],
-            mapController: _mapController,
           ),
         ),
-      ),
+      ],
+      mapController: _mapController,
     );
   }