So bare with me as I am completely new to using flutter.

I have accomplished so far with my code the following:

1. User Login
2. Sending User To Home.dart passing username so I can display thier data from database.
3. Mysql / Php connection sending and receiving data to database.
4. Checking and Asking for permission for GPS Device Access.
5. Getting GPS Co-ordinates but only printing them to the debug terminal.

This is where I need help / assistance / guidance.

Below is my current code which is for the Home.dart where the user is sent after login. Running the app everything in the code works fine with no issues.

    import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

class HomePage extends StatelessWidget {
  final String username;
  const HomePage({super.key, required this.username});

void getLocation() async
{
  Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
  print (position);
}

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Location"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
//"LAT: ${Position.latitude}, LNG: ${Position.longitude}
""
          ),
            ElevatedButton(
              child: Text("$username Get location"),
              onPressed: () {
                getLocation();
              },
            ),
          ],
        ),
      ),
    );
}
}

The part that I am having issues with is the line that is commented out for the Text

//"LAT: ${Position.latitude}, LNG: ${Position.longitude}

That Text is where I want to put the gps coordinates at. So I did do some googling and found more code that does just what I want, however it does not incorporate reading in of the username passed in on this line:

const HomePage({super.key, required this.username});

So the code that I am looking to incorporate into what I currently have is as follows:

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

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

class _HomePageState extends State<HomePage> {
  late Position _currentPosition;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Location"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
"LAT: ${_currentPosition.latitude}, LNG: ${_currentPosition.longitude}"
          ),
            ElevatedButton(
              child: const Text("Get location"),
              onPressed: () {
                _getCurrentLocation();
              },
            ),
          ],
        ),
      ),
    );
  }

  _getCurrentLocation() {
    Geolocator
      .getCurrentPosition(desiredAccuracy: LocationAccuracy.best, forceAndroidLocationManager: true)
      .then((Position position) {
        setState(() {
          _currentPosition = position;
        });
      }).catchError((e) {
        print(e);
      });
  }
}

So since the code above is everything that I need it to do I used it as the base and thought that I could just make the few changes to it by making it look like this:

    import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

class HomePage extends StatefulWidget {
  final String username;
  const HomePage({super.key, required this.username});

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

class _HomePageState extends State<HomePage> {
  Position? _currentPosition; 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Location"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
" Your Position is:  LAT: ${_currentPosition?.latitude}, LNG: ${_currentPosition?.longitude}"
          ),

            ElevatedButton(
              child: const Text("Get location"),
              onPressed: () {
                _getCurrentLocation();
              },
            ),
          ],
        ),
      ),
    );
  }

  _getCurrentLocation() async{
    await Geolocator.checkPermission();
    await Geolocator.requestPermission();

    Geolocator
      .getCurrentPosition(desiredAccuracy: LocationAccuracy.best, forceAndroidLocationManager: true)
      .then((Position position) {
        setState(() {
          _currentPosition = position;
        });
      }).catchError((e) {
        print(e);
      });
  }
}

So there are 2 issues with this code.

1. Undefined name $username.

If I remove $username from the following line:

Text(
    $username + " Your Position is:  LAT: ${_currentPosition.latitude}, LNG: ${_currentPosition.longitude}"
              ),

I can actually run with debug. I run the app and it lets me enter the username and password and then takes me to the home.dart page and it immediately throws out a red flag with the following error:

lateinitialization error or something or other. So I edited the code to add the ? to the following line:

” Your Position is: LAT: ${_currentPosition?.latitude}, LNG: ${_currentPosition?.longitude}”

Now when I run the app, it does exactly what I want it to do by displaying the gps location in the TEXT on the screen and then I can move on to putting it into the database. The issue is that when you click on the Elevated button the first time both longitude and lattitude are NULL. Each time you click on it after that it loads the right co-ordinates.

Please help me to get the username passed in properly so the rest of the code recognizes it and also how to get the right GPS coordinates on the first click instead of getting null on the first click. And if there can be an explanation that goes with it so I can understand flutter better.