fluttercurrentlocation

Flutter map current location : The following NoSuchMethodError was thrown building HomeScreen(dirty, state:_HomeScreenState#fc684)


I am using flutter map and geolocator package to get current location and display in map but I am getting error as below

The getter 'latitude' was called on null. Receiver: null Tried calling: latitude

I have gone through this issue but haven't helped https://github.com/johnpryan/flutter_map/issues/124

I have used it in stateful widget

  LatLng _center ;
  Position currentLocation;

  Future<Position> locateUser() async {
    return Geolocator()
        .getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
  }

  getUserLocation() async {
    currentLocation = await locateUser();
    setState(() {
      _center = LatLng(currentLocation.latitude, currentLocation.longitude);
    });
    print('center $_center');
  }

  @override
  void initState() {
    super.initState();
    getUserLocation();
  }

This the widget where I am calling the getUserLocation()

  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Plants Watch'),
        backgroundColor: Colors.green[700],
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.exit_to_app),
            onPressed: () {
              BlocProvider.of<AuthenticationBloc>(context).dispatch(
                LoggedOut(),
              );
            },
          )
        ],
      ),
      body: Stack(
        children: <Widget>[
          new FlutterMap(
                options: new MapOptions(
                  center: new LatLng(currentLocation.latitude, currentLocation.longitude),
                  maxZoom: 13.0,
                ),
                layers: [
                  new TileLayerOptions(
          urlTemplate: "https://api.tiles.mapbox.com/v4/"
              "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
          additionalOptions: {
            'accessToken': '<accessToken>',
            'id': 'mapbox.streets',
          },
        ),
        new MarkerLayerOptions(
          markers: [
            new Marker(
              width: 80.0,
              height: 80.0,
              point: LatLng(currentLocation.latitude, currentLocation.longitude),
              builder: (ctx) =>
              new Container(
                child: new IconButton(
                  icon: Icon(Icons.location_on),
                  color: Colors.green[700],
                  iconSize: 45.0,
                  onPressed: (){
                  print('Marker Tapped');
                  },
                ),
              ),
            ),
          ],
        ),
       ],
     ),
     Padding(
       padding: const EdgeInsets.all(16.0),
       child: Align(
         alignment: Alignment.bottomRight,
         child: FloatingActionButton(
           backgroundColor: Colors.green[700],
           child: Icon(Icons.add),
           onPressed: () {
             Navigator.push(context, MaterialPageRoute(builder: (context)=> PostPage()));
             },
             ),
            ),
          )
        ],
      )
    );
  }
}


I just want to remove the no such method error on building app.

Solution

  • Issue is in MarkerLayerOption where i am calling user current location which results in the latitude error. So make changes to LatLng in both FlutterMap function and MarkerLayerOption solves the issue.

    new FlutterMap(
                    options: new MapOptions(
                      center: new LatLng(12.9716, 77.5946),
    
                      maxZoom: 13.0,
                    ),
                    layers: [
                      new TileLayerOptions(
              urlTemplate: "https://api.tiles.mapbox.com/v4/"
                  "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
              additionalOptions: {
                'accessToken': '<accessToken>',
                'id': 'mapbox.streets',
              },
            ),
            new MarkerLayerOptions(
              markers: [
                new Marker(
                  width: 80.0,
                  height: 80.0,
                  point: LatLng(12.9716, 77.5946),
    
                  builder: (ctx) =>
                  new Container(
                    child: new IconButton(
                      icon: Icon(Icons.location_on),
                      color: Colors.green[700],
                      iconSize: 45.0,
                      onPressed: (){
                      print('Marker Tapped');
                      },
                    ),
                  ),
                ),
              ],
            ),