per descarregar els nous paquets.Per poder fer servir els mapes de Google Maps, caldrà afegir el paquet Google Maps for Flutter. Obrirem el fitxer pubspec.yaml i afegirem una línia a l'apartat dependencies, on indicarem que volem fer servir aquest paquet en versions iguals o superiors a l'actual.
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^2.13.1
En el moment de crear aquest exemple, la darrera versió era la 2.13.1; però convé posar-hi la darrera existent en el
moment de crear la nostra aplicació. A la pàgina d'informació sobre
Google Maps for Flutter hi trobarem quina és
la darrera versió en aquell moment. Un cop modificat el fitxer, cal picar al botó
per descarregar els nous paquets.
Per poder emprar els mapes de Google, ens cal tenir un identificador. Hem d'anar a Google Cloud, on ens haurem d'identificar amb el nostre compte de Google.
Nota: En algunes aplicacions ens hem trobat que els comptes de Google vinculats als usuaris UPC tenen algunes restriccions. Pot ser una bona idea fer servir el nostre compte personal de Google.
A la part superior dreta de la pàgina, picarem el botó Consola. Un cop a la consola, a la part superior esquerra podem tenir el nom del projecte actual o bé l'opció de crear un nou projecte. Si ens surt el nom del projecte actual, picarem a sobre i veurem la llista dels nostres projectes i un botó per crear un projecte nou. En aquest cas, creem un nou projecte. Ens demanarà que li donem un nom i, per exemple, hi posarem MapaFlutter, sense indicar cap organització. Un cop fet això, hem de seleccionar el projecte que acabem de crear.
Ja dins del projecte, picarem l'enllaç Panel i cercarem (a l'esquerra) l'opció Explorar y habilitar API. A la part superior cercarem el botó Habilitar APIs y servicios. Hi ha moltes API disponibles, però ens interessen les de mapes; per tant, cerquem aquest títol. Activarem les opcions Maps SDK for Android i Maps SDK for iOS. Pot ser que ens demani que definim un compte de facturació; si és el cas, picarem a cancel·lar perquè no ho necessitem.
Tornem enrere i estarem a la pàgina APIs y servicios (si no és així, piquem al botó de les tres ratlles de la part superior esquerra i cerquem aquesta opció). En el menú de l'esquerra, piquem a l'opció Credenciales. A la part superior picarem el botó Crear credenciales i triarem l'opció Clave de API. Aquí podríem establir restriccions però, en principi, no en posarem cap. Llavors picarem el botó Crear. Un cop fet això, veurem la clau, que pot tenir un aspecte com aquest:
^^1aqOrZiWSnXDcQmWQSAIzaSyDAzkeZb4WynCw
i picarem el botó Cerrar. Ara hem d'introduir aquesta clau a les configuracions d'Android i iOS del nostre projecte. Òbviament, si només volem fer l'aplicació per a un sistema operatiu, podem prescindir de l'altre.
Per a Android, cal anar al fitxer AndroidManifest.xml que es troba a la carpeta main de la carpeta src de la carpeta app de la carpeta android i afegir la línia del permís d'internet després de la de manifest i abans de la d'application. Al final de l'etiqueta application, abans de tancar-la, posarem les instruccions que indiquen la clau.
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<application
...
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="^^1aqOrZiWSnXDcQmWQSAIzaSyDAzkeZb4WynCw" />
</application>
...
Per a iOS cal anar al fitxer AppDelegate.swift que es troba a la carpeta Runner de la carpeta ios i afegir la importació de Google Maps al final de la llista d'importacions. També hem d'afegir la clau, que posarem a l'inici del contingut de Bool.
...
import GoogleMaps
...
) -> Bool {
GMSServices.provideAPIKey("^^1aqOrZiWSnXDcQmWQSAIzaSyDAzkeZb4WynCw")
...
Per a iOS també cal anar al fitxer Info.plist que es troba a la carpeta Runner de la carpeta ios i afegir el missatge amb el qual es demanarà el permís a l'usuari. Afegirem dues línies després de l'etiqueta <dict> i abans de la resta del seu comtingut.
... <dict> <key>NSLocationWhenInUseUsageDescription</key> <string>Cal accés a la teva ubicació per mostrar el mapa</string> ...
on el missatges es pot personalitzar segons ens agradi.
En el cas d'Android, ens poden aparèixer problemes deguts a versions antigues. Si no ens diu res, no cal tocar-ho però pot passar que haguem de modificar el fitxer settings.gradle.kts amb la versió que ens recomani.
...
plugins {
...
id("com.android.application") version "8.7.3" apply false
...
}
...
I una cosa similar amb el fitxer gradle-wrapper.properties, que es troba a la carpeta wrapper que està dins de la carpeta gradle.
... distributionUrl=https\://services.gradle.org/distributions/gradle-8.12-all
.zip ...
Nota: Aquest exemple està parcialment basat en l'aplicació Map App creada per AristiDevs.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.