How to create circle on current location in flutter
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
)
)
],
),)
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
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),
),],),
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,
);