Flutter – How to track user location in the background?

I have a Flutter application that allows an administrator to create a route on a map by saving the latitude and longitude. The admin can then save this route so that users can use it to find the admin-set fishing points of interest. However, I encountered an issue where the application stopped tracking the route when the admin put their phone in their pocket or locked the screen. I’ve been told that I can solve this problem by using background services.

Here is my code for tracking:

class TrackRouteScreen extends StatefulWidget {
  final String id;

  TrackRouteScreen({required this.id});

  @override
  State<TrackRouteScreen> createState() => _TrackRouteScreenState();
}

class _TrackRouteScreenState extends State<TrackRouteScreen> {
  bool isTracking = false;
  final CollectionReference routesCollection = FirebaseFirestore.instance.collection('Fish     POI');
  late MapController mapController;
  LatLng? currentPosition;
  List<LatLng> polylineCoordinates = [];
  List<Marker> markers = [];
  StreamSubscription<Position>? positionStreamSubscription;

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

  Future<void> initialize() async {
    mapController = MapController();
    currentPosition = await getCurrentLocation();
    setState(() {});
  }

  // Get current location of the user
  Future<LatLng> getCurrentLocation() async {
    bool serviceEnabled;
    LocationPermission permission;

    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      throw Exception('Location services are disabled');
    }

    permission = await Geolocator.checkPermission();

    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission==LocationPermission.denied||permission == LocationPermission.deniedForever) {
        throw Exception('Location permissions are denied');
      }
    }

    if (permission == LocationPermission.deniedForever) {
      throw Exception('Location permissions are permanently denied');
    }

    Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high
    );

    return LatLng(position.latitude, position.longitude);
  }

  // Start tracking
  void startTracking() {
    setState(() {
      isTracking = true;
      polylineCoordinates.clear();
    });

    positionStreamSubscription = Geolocator.getPositionStream(
      locationSettings: LocationSettings()).listen((Position position) {
        updateLocation(position);
      }
    );
  }

  // Update location and polyline
  void updateLocation(Position position) {
    setState(() {    
      currentPosition = LatLng(position.latitude, position.longitude);
      polylineCoordinates.add(currentPosition!);
    });
  }

  // Stop tracking
  void stopTracking() {
    setState(() {
      isTracking = false;
    });
    positionStreamSubscription!.cancel();
    saveTrackedRoute(polylineCoordinates);
  }

  // Save tracked route to Firestore DB
  Future<void> saveTrackedRoute(List<LatLng> trackedRoute) async {
    try {
      final DocumentReference routeDocRef = routesCollection.doc(widget.id);

      await routeDocRef.update({
        'route': trackedRoute .map((latLng) => GeoPoint(latLng.latitude, latLng.longitude))
          .toList(),
      });

      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => AddImagesScreen(id: widget.id)),
      );
    } catch (error) {
      print('Error saving tracked route: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: body());
  }

  Widget body() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: Stack(
        children: [
          FlutterMap(
            mapController: mapController,
            options: MapOptions(center: currentPosition, zoom: 15),
            children: [
              TileLayer(
                urlTemplate: mapboxUrlTemplate,
                additionalOptions: {
                  'accessToken': mapboxAccessToken,
                  'id': 'mapbox.mapbox-streets-v8',
                },
              ),
              PolylineLayer(
                polylines: [
                  Polyline(
                    points: polylineCoordinates,
                    strokeWidth: 5,
                    color: Colors.blue,
                  ),
                ],
              ),
              CurrentLocationLayer(
                followOnLocationUpdate: FollowOnLocationUpdate.always,
                style: LocationMarkerStyle(
                  marker: DefaultLocationMarker(),
                ),
              ),
            ],
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: GradientElevatedButton(
                onTap: isTracking ? stopTracking : startTracking,
                width: MediaQuery.of(context).size.width,
                beginningColor: isTracking ? Colors.red : Colors.green,
                endingColor: isTracking ? Colors.red : Colors.green,
                text: isTracking ? 'Stop' : 'Start',
              ),
            ),
          ),
          Positioned(
            top: 40.0,
            right: 15.0,
            child: FloatingActionButton(
              onPressed: () {
                if (isTracking) {
                  showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: Text('Quit Tracking'),
                        content: Text('Are you sure you want to quit tracking?'),
                        actions: <Widget>[
                          TextButton(
                            child: Text('Cancel'),
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                          ),
                          TextButton(
                            child: Text('Quit'),
                            onPressed: () {
                              Navigator.of(context).pop();
                              Navigator.of(context).pop();
                              stopTracking();
                            },
                          ),
                        ],
                      );
                    },
                  );
                } else {
                  Navigator.pop(context);
                }
              },
              child: Icon(Icons.close),
              backgroundColor: Colors.grey[300],
              foregroundColor: Colors.black,
            ),
          ),
        ],
      ),
    );
  }
}

As a 17-year-old girl who is new to app development, I find this concept confusing. What does it mean to track in the background? How can I implement it? Additionally, I’m worried about users who may not have a data connection. In such cases, where can the data be stored until a connection is available again?

Can someone give me a solid understanding of this, modify the code and explain it in a simple way? And which package will suit this?