How to create circle on current location in flutter

Viewed 25235

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

enter image description here

Thanks in advance.

6 Answers

This functionality is now available in the google_maps_flutter package:

https://pub.dev/documentation/google_maps_flutter_platform_interface/latest/google_maps_flutter_platform_interface/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,
  );

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

You could use google_maps_flutter plugin, here is the code:

circles: Set.from([Circle( circleId: CircleId('currentCircle'),
      center: LatLng(position.latitude,position.longitude),
      radius: 4000,
          fillColor: Colors.blue.shade100.withOpacity(0.5),
          strokeColor:  Colors.blue.shade100.withOpacity(0.1),
    ),],),

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

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.

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.

Related