Flutter map_view center to user location

Question

I'm using the map_view plugin to build a map in my Fluter app. I'm following the example, but I would like to initialize the map to the user current location without hardcoding the coordinates.

I have been digging into the docs and the Github issues and found this, but I can't understand how to apply it.

The map is initialized this way:

mapView.show(
    new MapOptions(
        mapViewType: MapViewType.normal,
        showUserLocation: true,
        initialCameraPosition: new CameraPosition(
            new Location(45.5235258, -122.6732493), 14.0),
        title: "Recently Visited"),
    toolbarActions: [new ToolbarAction("Close", 1)]);

Get notified when the map is ready

How can I use this code to set the position of the map?

mapView.onLocationUpdated.listen((location) => myUserLocation = location);

This is the entirety of my code:

Location myUserLocation = null;

class NuMapView extends StatefulWidget {
  @override
_NuMapViewState createState() => new _NuMapViewState();
}




class _NuMapViewState extends State<NuMapView> {
  static String apiKey = "mykey";

  MapView mapView;
  CameraPosition cameraPosition;
  var compositeSubscription = new CompositeSubscription();
  var staticMapProvider = new StaticMapProvider(apiKey);
  Uri staticMapUri;




  @override
  void initState(){
      print("dentro init state\n");

  mapView = new MapView();
  mapView.onLocationUpdated.listen((location) {
    print("cacchissime\n");
    if (myUserLocation == null){
      print("user location non null\n");
      myUserLocation = location;
      showMap();
    }
    else {
      print("user location è nullo!!\n");
    }


  } );

  super.initState();
    }



    bool ready = false;

  List<Marker> _markers = new List<Marker>();


    });
  }





  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Text("ciao")
      ),

    );
  }

  showMap() {
    mapView.show(
        new MapOptions(
            mapViewType: MapViewType.normal,
            showUserLocation: true,
            showMyLocationButton: true,
            showCompassButton: true,
            initialCameraPosition: new CameraPosition(
                new Location(myUserLocation.latitude, myUserLocation.longitude), 35.0),
            hideToolbar: false,
            title: "Cerca sulla mappa"),

        );
    StreamSubscription sub = mapView.onMapReady.listen((_) {
      mapView.setMarkers(_markers);

    });
    compositeSubscription.add(sub);
    sub = mapView.onLocationUpdated.listen((location) {
      print("Location updated $location");
    });
    compositeSubscription.add(sub);
    sub = mapView.onTouchAnnotation
        .listen((annotation) => print("annotation ${annotation.id} tapped"));
    compositeSubscription.add(sub);

    sub = mapView.onCameraChanged.listen((cameraPosition) =>
        this.setState(() => this.cameraPosition = cameraPosition));
    compositeSubscription.add(sub);


  }

Answer 1

Ok, based on the information that you posted, you can do something like this:

  //state class variable    
  Location myUserLocation;


      @override
      void initState() {
         mapView.onLocationUpdated.listen((location) {
            if (myUserLocation == null){
                myUserLocation = location;
                _loadMap();
            }

         } );
        super.initState();
      }


      _loadMap(){
          mapView.show(
           new MapOptions(
              mapViewType: MapViewType.normal,
              showUserLocation: true,
              initialCameraPosition: new CameraPosition(
                  new Location(myUserLocation.latitude, myUserLocation.longitude), 14.0),
              title: "Recently Visited"),
          toolbarActions: [new ToolbarAction("Close", 1)]);
      }

First, after initState you can get your current location and call showMap with your location.