Fix marker radius with map zoom in and out

canopas · Jun 28, 2024 · 26fc47d · 26fc47d
1 parent f9a0aa0
commit 26fc47d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 33 deletions.
diff --git a/app/lib/ui/flow/geofence/edit/components/place_marker.dart b/app/lib/ui/flow/geofence/edit/components/place_marker.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:style/extenstions/context_extenstions.dart';
 
@@ -19,13 +20,19 @@ class _PlaceMarkerState extends State<PlaceMarker> {
     return Stack(
       alignment: Alignment.center,
       children: [
-        AnimatedContainer(
-          duration: const Duration(milliseconds: 300),
-          width: widget.radius,
-          height: widget.radius,
-          decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(widget.radius),
-            color: context.colorScheme.primary.withOpacity(0.5),
+        ClipRect(
+          child: OverflowBox(
+            maxHeight: widget.radius,
+            maxWidth: widget.radius,
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 300),
+              width: widget.radius,
+              height: widget.radius,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(widget.radius),
+                color: context.colorScheme.primary.withOpacity(0.5),
+              ),
+            ),
           ),
         ),
         Container(

diff --git a/app/lib/ui/flow/geofence/edit/edit_place_view.dart b/app/lib/ui/flow/geofence/edit/edit_place_view.dart
@@ -38,7 +38,8 @@ class _EditPlaceViewState extends ConsumerState<EditPlaceView> {
   late CameraPosition _cameraPosition;
   GoogleMapController? _controller;
   TextEditingController _textController = TextEditingController();
-  double radiusToPixel = 0.0;
+  double _radiusToPixel = 0.0;
+  double _previousZoom = 0.0;
 
   @override
   void initState() {
@@ -57,9 +58,11 @@ class _EditPlaceViewState extends ConsumerState<EditPlaceView> {
   @override
   Widget build(BuildContext context) {
     final state = ref.watch(editPlaceViewStateProvider);
+    final latLng = LatLng(state.updatedPlace?.latitude ?? 0.0,
+        state.updatedPlace?.longitude ?? 0.0);
 
     _observeError();
-    _observeMapCameraPosition();
+    _observeMapCameraPosition(latLng);
     _observePopBack();
     _observeDeleteDialog();
 
@@ -127,6 +130,7 @@ class _EditPlaceViewState extends ConsumerState<EditPlaceView> {
   }
 
   Widget _googleMapView(double lat, double lng, bool isAdmin, double radius) {
+    _convertZoneRadiusToPixels(LatLng(lat, lng), radius * 1.07);
     return Stack(
       alignment: Alignment.center,
       children: [
@@ -148,18 +152,7 @@ class _EditPlaceViewState extends ConsumerState<EditPlaceView> {
             notifier.onMapCameraMove(position);
           },
         ),
-        FutureBuilder(
-            future: convertZoneRadiusToPixels(LatLng(lat, lng), radius * 1.08),
-            builder: (context, snapshot) {
-              if (snapshot.connectionState == ConnectionState.done &&
-                  snapshot.hasData) {
-                final newRadius = snapshot.data;
-                return IgnorePointer(child: PlaceMarker(radius: newRadius!));
-              } else {
-                return IgnorePointer(child: PlaceMarker(radius: radiusToPixel));
-              }
-            })
-        //IgnorePointer(child: PlaceMarker(radius: radiusToPixel))
+        IgnorePointer(child: PlaceMarker(radius: _radiusToPixel))
       ],
     );
   }
@@ -189,9 +182,8 @@ class _EditPlaceViewState extends ConsumerState<EditPlaceView> {
               divisions: 100,
             ),
           ),
-          const SizedBox(width: 8),
           Text(
-            radiusText,
+            radiusText.trim(),
             style: AppTextStyle.caption
                 .copyWith(color: context.colorScheme.textSecondary),
           ),
@@ -438,12 +430,11 @@ class _EditPlaceViewState extends ConsumerState<EditPlaceView> {
     });
   }
 
-  void _observeMapCameraPosition() {
-    ref.listen(editPlaceViewStateProvider.select((state) => state.updatedPlace),
+  void _observeMapCameraPosition(LatLng latLng) {
+    ref.listen(editPlaceViewStateProvider.select((state) => state.radius),
         (previous, next) async {
       if (next != null) {
-        final latLng = LatLng(next.latitude, next.longitude);
-        final zoom = getZoomLevel(next.radius);
+        final zoom = _getZoomLevel(next);
         await _controller
             ?.animateCamera(CameraUpdate.newLatLngZoom(latLng, zoom));
       }
@@ -459,16 +450,18 @@ class _EditPlaceViewState extends ConsumerState<EditPlaceView> {
     });
   }
 
-  double getZoomLevel(double radius) {
+  double _getZoomLevel(double radius) {
     double scale = radius / 200;
     double zoomLevel = 16 - math.log(scale) / math.log(2);
     return zoomLevel;
   }
 
-  Future<double> convertZoneRadiusToPixels(
+  void _convertZoneRadiusToPixels(
     LatLng latLang,
     double radius,
   ) async {
+    final zoom = await _controller?.getZoomLevel();
+    if (zoom == _previousZoom) return;
     const double earthRadius = 6378100.0;
     double lat1 = radius / earthRadius;
     double lng1 = radius / (earthRadius * cos(pi * latLang.latitude / 180));
@@ -481,9 +474,9 @@ class _EditPlaceViewState extends ConsumerState<EditPlaceView> {
     final p2 = await _controller?.getScreenCoordinate(LatLng(lat2, lng2));
 
     setState(() {
-      radiusToPixel = (p1!.x - p2!.x).abs().toDouble();
+      _previousZoom = zoom!;
+      _radiusToPixel = (p1!.x - p2!.x).abs().toDouble();
     });
-    return (p1!.x - p2!.x).abs().toDouble();
   }
 
   void _observeDeleteDialog() {

diff --git a/app/lib/ui/flow/geofence/edit/edit_place_view_model.dart b/app/lib/ui/flow/geofence/edit/edit_place_view_model.dart
@@ -124,7 +124,7 @@ class EditPlaceViewNotifier extends StateNotifier<EditPlaceState> {
   void onPlaceRadiusChanged(double value) {
     if (state.updatedPlace == null) return;
     final updatePlace = state.updatedPlace?.copyWith(radius: value);
-    state = state.copyWith(updatedPlace: updatePlace);
+    state = state.copyWith(updatedPlace: updatePlace,radius: value);
     enableSaveBtn();
   }
 
@@ -200,6 +200,7 @@ class EditPlaceState with _$EditPlaceState {
     ApiPlaceMemberSetting? updatedSetting,
     @Default([]) List<ApiUserInfo> membersInfo,
     String? address,
+    double? radius,
     Object? error,
     DateTime? popToBack,
     DateTime? showDeleteDialog,

diff --git a/app/lib/ui/flow/geofence/edit/edit_place_view_model.freezed.dart b/app/lib/ui/flow/geofence/edit/edit_place_view_model.freezed.dart
@@ -28,6 +28,7 @@ mixin _$EditPlaceState {
       throw _privateConstructorUsedError;
   List<ApiUserInfo> get membersInfo => throw _privateConstructorUsedError;
   String? get address => throw _privateConstructorUsedError;
+  double? get radius => throw _privateConstructorUsedError;
   Object? get error => throw _privateConstructorUsedError;
   DateTime? get popToBack => throw _privateConstructorUsedError;
   DateTime? get showDeleteDialog => throw _privateConstructorUsedError;
@@ -55,6 +56,7 @@ abstract class $EditPlaceStateCopyWith<$Res> {
       ApiPlaceMemberSetting? updatedSetting,
       List<ApiUserInfo> membersInfo,
       String? address,
+      double? radius,
       Object? error,
       DateTime? popToBack,
       DateTime? showDeleteDialog});
@@ -87,6 +89,7 @@ class _$EditPlaceStateCopyWithImpl<$Res, $Val extends EditPlaceState>
     Object? updatedSetting = freezed,
     Object? membersInfo = null,
     Object? address = freezed,
+    Object? radius = freezed,
     Object? error = freezed,
     Object? popToBack = freezed,
     Object? showDeleteDialog = freezed,
@@ -136,6 +139,10 @@ class _$EditPlaceStateCopyWithImpl<$Res, $Val extends EditPlaceState>
           ? _value.address
           : address // ignore: cast_nullable_to_non_nullable
               as String?,
+      radius: freezed == radius
+          ? _value.radius
+          : radius // ignore: cast_nullable_to_non_nullable
+              as double?,
       error: freezed == error ? _value.error : error,
       popToBack: freezed == popToBack
           ? _value.popToBack
@@ -194,6 +201,7 @@ abstract class _$$EditPlaceStateImplCopyWith<$Res>
       ApiPlaceMemberSetting? updatedSetting,
       List<ApiUserInfo> membersInfo,
       String? address,
+      double? radius,
       Object? error,
       DateTime? popToBack,
       DateTime? showDeleteDialog});
@@ -226,6 +234,7 @@ class __$$EditPlaceStateImplCopyWithImpl<$Res>
     Object? updatedSetting = freezed,
     Object? membersInfo = null,
     Object? address = freezed,
+    Object? radius = freezed,
     Object? error = freezed,
     Object? popToBack = freezed,
     Object? showDeleteDialog = freezed,
@@ -275,6 +284,10 @@ class __$$EditPlaceStateImplCopyWithImpl<$Res>
           ? _value.address
           : address // ignore: cast_nullable_to_non_nullable
               as String?,
+      radius: freezed == radius
+          ? _value.radius
+          : radius // ignore: cast_nullable_to_non_nullable
+              as double?,
       error: freezed == error ? _value.error : error,
       popToBack: freezed == popToBack
           ? _value.popToBack
@@ -303,6 +316,7 @@ class _$EditPlaceStateImpl implements _EditPlaceState {
       this.updatedSetting,
       final List<ApiUserInfo> membersInfo = const [],
       this.address,
+      this.radius,
       this.error,
       this.popToBack,
       this.showDeleteDialog})
@@ -344,6 +358,8 @@ class _$EditPlaceStateImpl implements _EditPlaceState {
   @override
   final String? address;
   @override
+  final double? radius;
+  @override
   final Object? error;
   @override
   final DateTime? popToBack;
@@ -352,7 +368,7 @@ class _$EditPlaceStateImpl implements _EditPlaceState {
 
   @override
   String toString() {
-    return 'EditPlaceState(loading: $loading, isAdmin: $isAdmin, enableSave: $enableSave, saving: $saving, deleting: $deleting, gettingAddress: $gettingAddress, placeId: $placeId, updatedPlace: $updatedPlace, updatedSetting: $updatedSetting, membersInfo: $membersInfo, address: $address, error: $error, popToBack: $popToBack, showDeleteDialog: $showDeleteDialog)';
+    return 'EditPlaceState(loading: $loading, isAdmin: $isAdmin, enableSave: $enableSave, saving: $saving, deleting: $deleting, gettingAddress: $gettingAddress, placeId: $placeId, updatedPlace: $updatedPlace, updatedSetting: $updatedSetting, membersInfo: $membersInfo, address: $address, radius: $radius, error: $error, popToBack: $popToBack, showDeleteDialog: $showDeleteDialog)';
   }
 
   @override
@@ -377,6 +393,7 @@ class _$EditPlaceStateImpl implements _EditPlaceState {
             const DeepCollectionEquality()
                 .equals(other._membersInfo, _membersInfo) &&
             (identical(other.address, address) || other.address == address) &&
+            (identical(other.radius, radius) || other.radius == radius) &&
             const DeepCollectionEquality().equals(other.error, error) &&
             (identical(other.popToBack, popToBack) ||
                 other.popToBack == popToBack) &&
@@ -398,6 +415,7 @@ class _$EditPlaceStateImpl implements _EditPlaceState {
       updatedSetting,
       const DeepCollectionEquality().hash(_membersInfo),
       address,
+      radius,
       const DeepCollectionEquality().hash(error),
       popToBack,
       showDeleteDialog);
@@ -423,6 +441,7 @@ abstract class _EditPlaceState implements EditPlaceState {
       final ApiPlaceMemberSetting? updatedSetting,
       final List<ApiUserInfo> membersInfo,
       final String? address,
+      final double? radius,
       final Object? error,
       final DateTime? popToBack,
       final DateTime? showDeleteDialog}) = _$EditPlaceStateImpl;
@@ -450,6 +469,8 @@ abstract class _EditPlaceState implements EditPlaceState {
   @override
   String? get address;
   @override
+  double? get radius;
+  @override
   Object? get error;
   @override
   DateTime? get popToBack;