Get user's location for Flutter Web

Issue

I’m currently using the Flutter Geolocator Plugin to access user’s location (latitude/longitude), but it seems like it does not work for the web yet. I tried to find something to retrieve the user’s location in Flutter for web, but I couldn’t find it.

Has anyone already tried/found something to do the job?

Solution

To be able to retrieve the position for the web part I had to use
https://pub.dev/packages/js to expose the JavaScript API and combine it with https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API.

So here how it looks like :

  1. First create a file (ex: locationJs.dart) to expose the JS function :

     @JS('navigator.geolocation') // navigator.geolocation namespace
     library jslocation; // library name can be whatever you want
    
     import "package:js/js.dart";
    
    @JS('getCurrentPosition') // Accessing method getCurrentPosition 
    from       Geolocation API
    external void getCurrentPosition(Function success(GeolocationPosition pos));
    
    @JS()
    @anonymous
    class GeolocationCoordinates {
      external double get latitude;
      external double get longitude;
      external double get altitude;
      external double get accuracy;
      external double get altitudeAccuracy;
      external double get heading;
      external double get speed;
    
    external factory GeolocationCoordinates(
      {double latitude,
      double longitude,
      double altitude,
      double accuracy,
      double altitudeAccuracy,
      double heading,
      double speed});
      }
    
    @JS()
    @anonymous
    class GeolocationPosition {
    external GeolocationCoordinates get coords;
    
    external factory GeolocationPosition({GeolocationCoordinates 
    coords});
    }
    
  2. Call the newly created file

     import 'package:Shared/locationJs.dart';
    
      success(pos) {
         try {
           print(pos.coords.latitude);
           print(pos.coords.longitude);
           } catch (ex) {
            print("Exception thrown : " + ex.toString());
             }
         }
    
      _getCurrentLocation() {
          if (kIsWeb) {
            getCurrentPosition(allowInterop((pos) => success(pos)));
                    }
          }
    

Answered By – lioleveau

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.