Configurer un projet Flutter

Avant de configurer un projet Flutter, assurez-vous d'avoir suivi les étapes préalables sous Avant de commencer. Lorsque vous aurez activé la facturation et créé une clé API, vous pourrez configurer le projet Flutter qui vous servira à développer votre application.

Étape 1 : Installez le logiciel requis

Pour créer un projet à l'aide du package Google Maps pour Flutter, vous devez installer le SDK Flutter et configurer votre environnement de développement pour votre plate-forme cible. Pour en savoir plus, consultez le guide d'installation de Flutter.

Étape 2 : Ajoutez le package Google Maps pour Flutter à un nouveau projet

Flutter propose le package Google Maps pour Flutter en tant que plug-in Flutter.

Créez le projet Flutter et ajoutez-y le plug-in Maps.

  1. Créez un projet Flutter à l'aide de `flutter create` : 
      flutter create google_maps_in_flutter --platforms=android,ios,web
  
  Creating project google_maps_in_flutter...
  [Listing of created files elided]
  Wrote 127 files.

  All done!
    Le code de votre application se trouve dans google_maps_in_flutter/lib/main.dart. Pour exécuter votre application, saisissez : 
      cd google_maps_in_flutter
  flutter run
    Cette application cible iOS, Android et le Web. Pour le moment, le SDK Google Maps ne prend pas en charge les applications pour ordinateur en dehors d'un navigateur.
  2. Ajoutez le plug-in Google Maps pour Flutter à ce projet. 
    flutter pub add google_maps_flutter
  
  Resolving dependencies...
  [Listing of dependencies elided]

  Changed 14 dependencies!

Étape 3 : Définissez la version de la plate-forme

Android

Définissez la version minimale du SDK pour Android.

  1. Ouvrez le fichier de configuration android/app/build.gradle dans l'IDE de votre choix.
  2. Remplacez la valeur d'android.defaultConfig.minSdkVersion par 21 : 
      android {
    //...
    defaultConfig {
        applicationId "com.example.google_maps_in_flutter"
        minSdkVersion 21     // Set to 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    //...
  }
  3. Lorsque vous configurez defaultConfig, indiquez votre ID d'application unique.
  4. Enregistrez le fichier et synchronisez les modifications apportées à votre projet avec Gradle.

iOS

Définissez la version minimale de la plate-forme iOS.

  1. Ouvrez le fichier de configuration ios/Podfile dans l'IDE de votre choix.
  2. Ajoutez les lignes suivantes au début de ce Podfile : 
      # Set platform to 14.0 to enable latest Google Maps SDK
  platform :ios, '14.0'

Étape 4 : Ajoutez votre clé API au projet

Sous Avant de commencer, vous avez généré une clé API pour votre application. Ajoutez-la maintenant à votre projet Flutter. Pour Flutter, vous devez ajouter cette clé API à toutes les plates-formes cibles : iOS, Android et Web.

Dans les exemples suivants, remplacez YOUR_API_KEY par votre clé API.

Android

Pour vous faciliter la tâche, nous vous recommandons d'utiliser le plug-in Secrets Gradle pour Android.

Pour installer le plug-in Secrets Gradle pour Android dans votre projet Google Maps :

  1. Dans Android Studio, ouvrez votre fichier build.gradle ou build.gradle.kts de premier niveau et ajoutez le code suivant à l'élément dependencies sous buildscript.

    Groovy

    buildscript {
    dependencies {
        classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1"
    }
}

    Kotlin

    buildscript {
    dependencies {
        classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1")
    }
}
  2. Ouvrez le fichier build.gradle au niveau du module et ajoutez le code suivant à l'élément plugins.

    Groovy

    plugins {
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}

    Kotlin

    plugins {
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
}
  3. Dans le fichier build.gradle au niveau du module, assurez-vous que targetSdk et compileSdk sont définis sur 34.
  4. Enregistrez le fichier et synchronisez votre projet avec Gradle.
  5. Ouvrez le fichier secrets.properties dans votre répertoire de premier niveau et ajoutez le code suivant. Remplacez YOUR_API_KEY par votre clé API. Stockez votre clé dans ce fichier, car secrets.properties n'est pas vérifié dans un système de contrôle des versions. 
    MAPS_API_KEY=YOUR_API_KEY
  6. Enregistrez le fichier.

  7. Créez le fichier local.defaults.properties dans votre répertoire de premier niveau (même dossier que le fichier secrets.properties), puis ajoutez le code suivant.

    MAPS_API_KEY=DEFAULT_API_KEY

    Ce fichier a pour but de fournir un emplacement de sauvegarde de la clé API, à utiliser si le fichier secrets.properties est introuvable pour éviter l'échec des créations. Cette situation peut se produire si vous clonez l'application à partir d'un système de contrôle des versions qui omet secrets.properties et que vous n'avez pas encore créé de fichier secrets.properties localement pour fournir votre clé API.

  8. Enregistrez le fichier.
  9. Dans votre fichier AndroidManifest.xml, accédez à com.google.android.geo.API_KEY, puis modifiez le android:value attribute. Si le tag <meta-data> n'existe pas, créez-le comme enfant du tag <application>. 
    <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

    Note: com.google.android.geo.API_KEY is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Flutter SDK. For backwards compatibility, the API also supports the name com.google.android.maps.v2.API_KEY. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception.

  10. In Android Studio, open your module-level build.gradle or build.gradle.kts file and edit the secrets property. If the secrets property does not exist, add it.

    Edit the properties of the plugin to set propertiesFileName to secrets.properties, set defaultPropertiesFileName to local.defaults.properties, and set any other properties.

    Groovy

    secrets {
    // Optionally specify a different file name containing your secrets.
    // The plugin defaults to "local.properties"
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"

    // Configure which keys should be ignored by the plugin by providing regular expressions.
    // "sdk.dir" is ignored by default.
    ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore"
    ignoreList.add("sdk.*")       // Ignore all keys matching the regexp "sdk.*"
}

Kotlin

secrets {
    // Optionally specify a different file name containing your secrets.
    // The plugin defaults to "local.properties"
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"

    // Configure which keys should be ignored by the plugin by providing regular expressions.
    // "sdk.dir" is ignored by default.
    ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore"
    ignoreList.add("sdk.*")       // Ignore all keys matching the regexp "sdk.*"
}

Remarque : Comme indiqué ci-dessus, com.google.android.geo.API_KEY est le nom de métadonnées recommandé pour la clé API. Une clé portant ce nom peut être utilisée pour l'authentification auprès de diverses API basées sur Google Maps et s'exécutant sur la plate-forme Android, y compris le SDK Flutter. Pour assurer la rétrocompatibilité, l'API prend en charge également le nom com.google.android.maps.v2.API_KEY. Cet ancien nom autorise l'authentification auprès de l'API Google Maps Android v2 uniquement. Une application ne peut spécifier qu'un seul des noms de métadonnées de clé API. Si les deux noms sont spécifiés, l'API génère une exception.

iOS

Ajoutez votre clé API au fichier AppDelegate.swift.

  1. Ouvrez le fichier ios/Runner/AppDelegate.swift dans votre projet Flutter depuis l'IDE de votre choix.
  2. Ajoutez l'instruction d'importation suivante afin d'ajouter le package Google Maps pour Flutter à votre application :
    3. import GoogleMaps
  3. Ajoutez votre API à la méthode application(_:didFinishLaunchingWithOptions:), en remplaçant YOUR_API_KEY par votre clé API : 
    GMSServices.provideAPIKey("YOUR_API_KEY")
  4. Enregistrez et fermez le fichier AppDelegate.swift.

Le fichier AppDelegate.swift complété doit ressembler à ce qui suit :

import UIKit
import Flutter
import GoogleMaps  // Add this import

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Add your Google Maps API key
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Web

Ajoutez votre clé API au fichier d'application index.html.

  1. Ouvrez le fichier web/index.html dans votre projet Flutter depuis l'IDE de votre choix.
  2. Ajoutez le tag de script suivant dans le tag <head>, en remplaçant YOUR_API_KEY par votre clé API. 
    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>
  3. Enregistrez et fermez le fichier index.html.

    La section head complète du fichier index.html doit se présenter comme suit :

        <head>
      <base href="/">
      
      <meta charset="UTF-8">
      <meta content="IE=Edge" http-equiv="X-UA-Compatible">
      <meta name="description" content="A new Flutter project.">
      
      <!-- iOS meta tags & icons -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="google_maps_in_flutter">
      <link rel="apple-touch-icon" href="icons/Icon-192.png">
      
      <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "YOUR_API_KEY",
          v: "weekly",
          // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
          // Add other bootstrap parameters as needed, using camel case.
          });
      </script>
      
      <title>google_maps_in_flutter</title>
      <link rel="manifest" href="manifest.json">
    </head>

Étape 5 : Ajoutez une carte

Le code suivant montre comment ajouter une carte simple à une nouvelle application Flutter.

  1. Ouvrez le fichier lib/main.dart dans votre projet Flutter depuis l'IDE de votre choix.
  2. Ajoutez ou modifiez des méthodes dans la méthode principale par défaut de votre application pour créer et initialiser une instance de mapController. 
          import 'package:flutter/material.dart';
      import 'package:google_maps_flutter/google_maps_flutter.dart';
      
      void main() => runApp(const MyApp());
      
      class MyApp extends StatefulWidget {
        const MyApp({super.key});
      
        @override
        State<MyApp> createState() => _MyAppState();
      }
      
      class _MyAppState extends State<MyApp> {
        late GoogleMapController mapController;
      
        final LatLng _center = const LatLng(-33.86, 151.20);
      
        void _onMapCreated(GoogleMapController controller) {
          mapController = controller;
        }
      
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            home: Scaffold(
              appBar: AppBar(
                title: const Text('Maps Sample App'),
                backgroundColor: Colors.green[700],
              ),
              body: GoogleMap(
                onMapCreated: _onMapCreated,
                initialCameraPosition: CameraPosition(
                  target: _center,
                  zoom: 11.0,
                ),
              ),
            ),
          );
        }
      }
  3. Démarrez tous les émulateurs ou appareils sur lesquels vous souhaitez exécuter votre application.
  4. Exécutez votre application. Un résultat semblable à celui-ci doit s'afficher : 
      flutter run

   
    Multiple devices found:
    Android phone (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
    iPhone (mobile)  • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
    Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124
    [1]: Android phone
    [2]: iPhone
    [3]: Chrome
    
    Please choose one (To quit, press "q/Q"):

    Saisissez le numéro de la plate-forme que vous souhaitez exécuter. Chaque fois que vous appellerez flutter run, Flutter vous présentera ces options. Si aucun émulateur n'est en cours d'exécution ou si aucun appareil de test n'est connecté sur votre système de développement, Flutter doit ouvrir Chrome.

    Normalement, chaque plate-forme affiche une carte centrée sur Sydney, en Australie. Si vous ne voyez pas la carte, vérifiez que vous avez ajouté votre clé API au projet cible approprié.

Étapes suivantes

Maintenant que vous disposez d'une clé API et d'un projet Flutter, vous pouvez créer et exécuter des applications. Le package Google Maps pour Flutter propose de nombreux tutoriels et applications exemples qui peuvent vous aider à démarrer. Pour en savoir plus, consultez les ressources suivantes :