How to create circle on current location in flutter

Question

I am working on flutter project.On which I have to draw one circle on my current location on google map.Does any one have idea.

I want like this in flutter

Answer 1

This functionality is now available in the google_maps_flutter package:

https://pub.dev/documentation/google_maps_flutter/latest/google_maps_flutter/Circle-class.html

Partial example:

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,
  );

Answer 2

There is an opended pull request with this feature at https://github.com/flutter/plugins/pull/1136

But Google team has not accepted it because there is a issue with license with whom made the commits. I don't know if this will be merged. There are a lot of pull request accepted, but not integrated.

Answer 3

If you use flutter_map plugin, then you can draw radius circle easily. Here is the code.

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
            )
        )
    ],
),)

Answer 4

Please keep in mind the google maps widget is a developer preview, at version 0.2. Many things and abilities will likely change over the coming months.

Answer 5

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 in current location by following code

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

Here is an excellent article which explains all possible things you can do with Google Maps for Flutter (Developers Preview) plugin article