How to Create Circle On Current Location In Flutter?

How to Create Circle On Current Location In Flutter?

Now a day generally while building a mobile application like a Cab Booking Application or Food Ordering Application needs a google map integration in it so that end-user can track the specific or particular order. so in this article, we will go through How to Create Circle On Current Location In Flutter ??

Know How to Create Circle On Current Location In Flutter?

This functionality is now available in the google_maps_flutter package: Code Snippet will look like the below:

Set<Circle> circles = Set.from([Circle(
    circleId: CircleId(id),
    center: LatLng(latitude, longitude),
    radius: 4000,
)]);

GoogleMap(
    mapType: MapType.normal,
    myLocationEnabled: true,
    myLocationButtonEnabled: true,
    initialCameraPosition: initialMapLocation,
    onMapCreated: (GoogleMapController controller) {
      _controller.complete(controller);
    },
    onCameraMove: null,
    circles: circles,
  );

One way to do this is by changing the icon of the Marker

mapController.addMarker(MarkerOptions(
                position: LatLng(37.4219999, -122.0862462),
                icon: BitmapDescriptor.fromAsset('images/circle.png',),
              ),);

After setting appropriate permission on android/ios, set trackCameraPosition: true and myLocationEnabled: true on google maps options, after that, you can add your image to the current location by the following code:

mapController.addMarker(MarkerOptions(
               position: mapController.cameraPosition.target,
               icon: BitmapDescriptor.fromAsset('images/circle.png',),
             ),);

You can also refer to our other articles like How to Open Google Map App if Available With Flutter

If you use the flutter_map plugin, then you can draw a radius circle easily. You can also try with the below code snippet.

FlutterMap(
    options: MapOptions(
        center: LatLng(latitude, longitude),
        zoom: 16.0
    ),
    layers: [
        TileLayerOptions(
            urlTemplate: "map url",
            additionalOptions:  {
            "accessToken" : "xxx",
            "id" : "map id"
            }
        ), 
        MarkerLayerOptions(
            markers: Marker( //marker
                width: 25.0,
                height: 25.0,
                point: LatLng(latitude, longitude),
                builder: (context) {
                return Container(
                    child: IconButton(
                        icon: Icon(Icons.my_location),
                        iconSize: 25.0,
                        color: Color(0xff9045f7),
                        onPressed: () {
                            print('marker tapped');
                        },
                        ),
                    );
                }
            )
        ),
        CircleLayerOptions(
            circles: CircleMarker( //radius marker
                point: LatLng(latitude, longitude),
                color: Colors.blue.withOpacity(0.3),
                borderStrokeWidth: 3.0,
                borderColor: Colors.blue,
                radius: 100 //radius
            )
        )
    ],
),)

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, we have been through how to create a circle on the current location in flutter ??

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.