Problem with Google_maps_flutter in flutter

See more:

Dart

google-api

Flutter

Hello I'm trying to use the google_maps_flutter package to make a Google map for the Client so that he can Track and locate Orders within the application the maps are not showing from the first time Even though you see in this code the GoogleMap must be created if the polylineCoordinates.isEmpty || currentLocation == null is not null if so the application will create a Lottie animation and a text message underneath well, as you can see from this Picture (gif) the Problem is clear the map is not showing from the first navigation to the (mainPage.dart) screen

screenshot GIF

my Google cloud account is Free 300$ credit for 90 days

What I have tried:

import 'dart:async';
import 'package:applicationservice/RegisterPage.dart';
import 'package:applicationservice/homePage.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:lottie/lottie.dart' as animation;

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

const String google_api_key = "AIzaSyAnpCS9K8...._kabKsMAZzsQ";

class _MainScreenState extends State<MainScreen> {
  final Completer<GoogleMapController> _controller = Completer();

  static const LatLng sourceLocation = LatLng(32.885353, 13.180161);
  static const LatLng destination = LatLng(32.895325, 13.181645);
  List<LatLng> polylineCoordinates = [];
  LocationData? currentLocation;
// تحديث الموقع

  void getCurrentLocation() async {
    Location location = Location();

    location.getLocation().then(
      (location) {
        currentLocation = location;
      },
    );
    GoogleMapController googleMapController = await _controller.future;

    location.onLocationChanged.listen(
      (newLoc) {
        currentLocation = newLoc;
        googleMapController
            .animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
                zoom: 13.5,
                target: LatLng(
                  newLoc.latitude!,
                  newLoc.longitude!,
                ))));
        setState(() {});
      },
    );
  }
  // تطبيق المسار بين نقطتين

  void getRoutePolylinePoints() async {
    PolylinePoints polylinePoints = PolylinePoints();
    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      google_api_key,
      PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
      PointLatLng(destination.latitude, destination.longitude),
    );

    if (result.points.isNotEmpty) {
      result.points.forEach(
        (PointLatLng point) => polylineCoordinates.add(
          LatLng(point.latitude, point.longitude),
        ),
      );

      setState(() {});
    }
  }

  @override
  void initState() {
    getCurrentLocation();
    getRoutePolylinePoints();
    print("TTTT");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    TextStyle defaultStyle = TextStyle(
        color: Colors.black, fontFamily: 'almarailight', fontSize: 20.0);
    TextStyle linkStyle = TextStyle(color: Colors.blue);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(33, 33, 33, 1),
        centerTitle: true,
        title: const Text(
          'الخريطة',
          style: TextStyle(
            fontFamily: 'cairoBold',
            fontSize: 32.0,
            color: Colors.white,
            shadows: <Shadow>[
              Shadow(
                offset: Offset(2, 2),
                blurRadius: 1.0,
                color: Color.fromARGB(255, 0, 0, 0),
              ),
              Shadow(
                offset: Offset(2, 2),
                blurRadius: 1.0,
                color: Color.fromARGB(124, 0, 0, 0),
              ),
            ],
          ),
        ),
        leading: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: const BoxDecoration(
              color: Color(0xff7c94b6),
              image: DecorationImage(
                image: NetworkImage('https://i.imgur.com/nu9p9t3.jpg'),
                fit: BoxFit.cover,
              ),
              borderRadius: BorderRadius.all(Radius.circular(50.0)),
            ),
          ),
        ),
        actions: <Widget>[
          IconButton(
            icon: const Icon(
              Icons.settings,
              color: Colors.white,
            ),
            onPressed: () {
              // do something
            },
          )
        ],
      ),
      body: polylineCoordinates.isEmpty || currentLocation == null
          ? Center(
              child: Column(children: <Widget>[
              Padding(
                padding: EdgeInsets.only(bottom: 5),
                child:
                    animation.Lottie.asset('assets/lotties/loadingLocation.json'),
              ),
              const Text(
                "الرجاء الإنتظار ...",
                style: TextStyle(
                    fontFamily: 'almarailight',
                    fontSize: 26,
                    color: Colors.black),
              ),
            ]))
          : GoogleMap(
              initialCameraPosition:
                  const CameraPosition(target: sourceLocation, zoom: 14.5),
              polylines: {
                Polyline(
                  polylineId: PolylineId("route"),
                  points: polylineCoordinates,
                  color: Colors.black,
                  width: 6,
                )
              },
              markers: {
                Marker(
                  markerId: const MarkerId("currentLocation"),
                  position: LatLng(
                      currentLocation!.latitude!, currentLocation!.longitude!),
                ),
                const Marker(
                  markerId: MarkerId("source"),
                  position: sourceLocation,
                ),
                const Marker(
                  markerId: MarkerId("destination"),
                  position: destination,
                ),
              },
              onMapCreated: (mapController) {
                _controller.complete(mapController);
              },
              myLocationEnabled: true,
              myLocationButtonEnabled: true,
              onCameraMove: (CameraPosition position) {
                // Update current location
                currentLocation = LocationData.fromMap({
                  "latitude": position.target.latitude,
                  "longitude": position.target.longitude
                });
              },
              onCameraIdle: () {
                setState(() {});
              },
            ),
    );
  }
}