Click here to Skip to main content
15,795,331 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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(() {});
              },
            ),
    );
  }
}
Posted
Comments
wseng 24-Jul-23 23:35pm    
I think you should add await in front since both functions are async.

await getCurrentLocation();

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900