Creating radius circle in flutter using flutter_map

Question

Im trying to build a screen that allow the user to use a slider to specify a certain radius in kilometres. in this screen the user will be able to use the slider and see a circle of grow and shrink that circle represnt the distance in kilometres.

I was able to show a circle on the user location but I have a few issues.

1_ the grow and shrink of the circle does not correctly represent the distance in KM.

2_ when I zoom in or out the circle does grow and shirk with the zoom. idont want this behaviour I would like the circle to stay the same even if the user zoom in/out.

3_ also is theres a way to stop the map rotation (stop the user from rotating the map with 2 fingers)

HERES THE SCREEN:

import 'package:--/helpers/location_helper.dart';
import 'package:--/widgets/layout/loader.dart';
import 'package:flutter/material.dart';

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  MapScreenState createState() => MapScreenState();
}

class MapScreenState extends State<MapScreen> {
  LatLng selectedLocation = LatLng(50.850346, 4.351721);
  double radiusKm = .01;
  bool isReady = false;

  @override
  void initState() {
    super.initState();
    initializeLocation();
  }

  Future<void> initializeLocation() async {
    var value = await getUserCurrentLocation(context);

    setState(() {
      selectedLocation = LatLng(value.latitude, value.longitude);
      isReady = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Map Screen'),
      ),
      body: !isReady
          ? const AppLoader()
          : Stack(
              children: [
                FlutterMap(
                  options: MapOptions(
                    center: LatLng(
                      selectedLocation.latitude,
                      selectedLocation.longitude,
                    ),
                    zoom: 8.0,
                    maxZoom: 16,
                    minZoom: 6,
                  ),
                  children: [
                    TileLayer(
                      urlTemplate:
                          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                      subdomains: const ['a', 'b', 'c'],
                    ),
                    CircleLayer(
                      circles: [
                        CircleMarker(
                          point: LatLng(
                            selectedLocation.latitude,
                            selectedLocation.longitude,
                          ),
                          color: Colors.blue.withOpacity(0.3),
                          borderColor: Colors.blue,
                          borderStrokeWidth: 1,
                          radius: radiusKm * 1000,
                        ),
                      ],
                    ),
                  ],
                ),
                Positioned(
                  bottom: 16,
                  left: 16,
                  right: 16,
                  child: Column(
                    children: [
                      Slider(
                          value: radiusKm,
                          min: 0.01,
                          max: 1,
                          onChanged: (value) {
                            setState(() {
                              radiusKm = value;
                            });
                          }),
                      Text('Radius: ${radiusKm.toStringAsFixed(1)} km'),
                    ],
                  ),
                ),
              ],
            ),
    );
  }
}

HERES THE getUserCurrentLocation FUNCTION:

Future<Position> getUserCurrentLocation(context) async {
  bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
  if (!serviceEnabled) {
    return Future.error(AppLocalizations.of(context)!.locationdisabled);
  }

  LocationPermission permission = await Geolocator.checkPermission();

  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) {
      return Future.error(AppLocalizations.of(context)!.locationdenied);
    }
  }

  if (permission == LocationPermission.deniedForever) {
    return Future.error(
        AppLocalizations.of(context)!.locationpermanentlydenied);
  }

  var location = await Geolocator.getCurrentPosition();

  return location;
}

packeges used:

geolocator: ^10.1.0

latlong2: ^0.8.0

flutter_map: ^4.0.0

I know I might have issue with the values and calculation of certain vars such as

radiusKm and in CircleLayer radius: radiusKm * 1000,

I expect to have the solution to:

1_ the grow and shrink of the circle does not correctly represent the distance in KM.

2_ when I zoom in or out the circle does grow and shirk with the zoom. idont want this behaviour I would like the circle to stay the same even if the user zoom in/out.

3_ also is theres a way to stop the map rotation (stop the user from rotating the map with 2 fingers)