Another exception was thrown: NoSuchMethodError: The getter 'latitude' was called on null

Question

I am trying to utilize the Location package in Flutter, but when I try to display the Latitude and Longitude in my app I am getting an error stating "The getter 'latitude' was called on null." Is it possible that there's something wrong with the location services on my device? I am also prompted with a popup when I click on the screen stating "For a better experience, turn on device location, which uses Google's location service" but I already enabled permissions for location services in the app. Below is my code

import 'package:flutter/material.dart'; 
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:provider/provider.dart';
import 'package:wasteagram/data/firestore_service.dart';
import 'package:location/location.dart'; 
import 'dart:async';
import 'package:wasteagram/model/user_location.dart'; 



class DetailPage extends StatefulWidget {

  final DocumentSnapshot post; 

  DetailPage({this.post}); 

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {

  LocationData locationData; 

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

  void retrieveLocation() async {
    var locationService = Location(); 
    locationData = await locationService.getLocation(); 
    setState(() {

    });

  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.post.data["wastedate"])
      ), 
      body: Center(
        child: Container( 
          child: Column(
            children: <Widget> [
              Image.network(widget.post.data["image"]),
              Text(widget.post.data["wastedate"]), 
              Text(widget.post.data["wastenumber"]), 
              Text('Latitude: ${locationData.latitude}'),
              Text('Longitude: ${locationData.longitude}')

            ]
          )
        )
      ),
    );
  }
}

Answer 1

try to use future builder for async method callback e.g.

FutureBuilder(
  future: retrieveLocation(),
  builder: (context, AsyncSnapshot snapshot) {
    if (snapshot.data == null) {
      return Center(child: CircularProgressIndicator());
    }
    return Center(
    child: Container( 
      child: Column(
        children: <Widget> [
          Image.network(widget.post.data["image"]),
          Text(widget.post.data["wastedate"]), 
          Text(widget.post.data["wastenumber"]), 
          Text('Latitude: ${locationData.latitude}'),
          Text('Longitude: ${locationData.longitude}')

        ]
      )
    )
  },
);

problem is ur build method is called before complete execution of retrieveLocation()

Answer 2

You are trying to access the latitude before the async call ends. You are calling it on initState() but the method ends probably after build() function is executed, so when trying to build the Text('Latitude: ${locationData.latitude}') widget, the locationData variable is null. A quick fix is to set a default value on locationData, but if you want to "wait" until the retrieveLocation() method ends you can:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.post.data["wastedate"])
      ), 
      body: Center(
        child: Container( 
          child: Column(
            children: <Widget> [
              Image.network(widget.post.data["image"]),
              Text(widget.post.data["wastedate"]), 
              Text(widget.post.data["wastenumber"]), 
              locationData!=null? Text('Latitude: ${locationData.latitude}') : Text('Waiting Latitude'),
              locationData!=null? Text('Longitude: ${locationData.longitude}') : Text('Waiting Longitude'),
            ]
          )
        )
      ),
    );
  }