Articles in this section
Category / Section

How to show current location in Flutter SfMaps?

9 mins read

In Flutter SfMaps, you can add a marker in the current location easily.

Step 1: Add location and syncfusion_flutter_maps packages to your dependencies in pubspec.yaml file.

Step 2: Import the below libraries in your dart file.

 

import 'package:location/location.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

 Step 3: Using the public APIs in the Flutter location package, we can get the current location.
Check more details about this package and the permission to be enabled to access the location data in this link.

 

Future<LocationData?> _currentLocation() async {
    bool serviceEnabled;
    PermissionStatus permissionGranted;
 
    Location location = new Location();
 
    serviceEnabled = await location.serviceEnabled();
    if (!serviceEnabled) {
      serviceEnabled = await location.requestService();
      if (!serviceEnabled) {
        return null;
      }
    }
 
    permissionGranted = await location.hasPermission();
    if (permissionGranted == PermissionStatus.denied) {
      permissionGranted = await location.requestPermission();
      if (permissionGranted != PermissionStatus.granted) {
        return null;
      }
    }
    return await location.getLocation();
  }

 

 

@override
  Widget build(BuildContext context) {
    return FutureBuilder<LocationData?>(
      future: _currentLocation(),
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapchat) {
        if (snapchat.hasData) {
          final LocationData currentLocation = snapchat.data;
          return SfMaps(
            layers: [
              MapTileLayer(
                initialFocalLatLng: MapLatLng(
                    currentLocation.latitude!, currentLocation.longitude!),
                initialZoomLevel: 5,
                initialMarkersCount: 1,
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                markerBuilder: (BuildContext context, int index) {
                  return MapMarker(
                    latitude: currentLocation.latitude!,
                    longitude: currentLocation.longitude!,
                    child: Icon(
                      Icons.location_on,
                      color: Colors.red[800],
                    ),
                    size: Size(20, 20),
                  );
                },
              ),
            ],
          );
        }
        return Center(child: CircularProgressIndicator());
      },
    );
  }

 

Screenshot:

 

Syncfusion OSM map marker image

 

Step 4:  Set the initialMarkersCount as 1 and the latitude and longitude of the MapMarker
as the latitude and longitude of the current location. The MapMarker will be returned from the markerBuilder.


Conclusion 

I hope you enjoyed learning about how to show current location in Flutter SfMaps.


You can refer to our Flutter SfMaps feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. 


For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. 


If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback. We are always happy to assist you! 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied