Un plugin Flutter qui fournit Picking Place à l’aide du widget Google Maps

Un plugin Flutter qui fournit ‘Picking Place’ en utilisant Google Maps widget.

Le projet s’appuie sur les packages ci-dessous.

Carte utilisant l’officiel de Flutter google_maps_flutter
Récupération de l’emplacement actuel à l’aide de Baseflow géolocalisateur
API de lieu et de géocodage à l’aide de celle d’hadrienlejard google_maps_webservice
Constructeur utilisant kevmoo tuple

Aperçu

Soutien

Si le forfait vous a été utile ou vous a fait gagner du temps, n’hésitez pas à m’offrir une tasse de café ! 😉 Plus je consomme de caféine, plus je peux réaliser de projets utiles à l’avenir.

Commencer

• Obtenez une clé API sur https://cloud.google.com/maps-platform/.

• Activez Google Map SDK pour chaque plate-forme.

  • Aller à Console des développeurs Google.
  • Choisissez le projet sur lequel vous souhaitez activer Google Maps.
  • Sélectionnez le menu de navigation puis sélectionnez « Google Maps ».
  • Sélectionnez « API » dans le menu Google Maps.
  • Pour activer Google Maps pour Android, sélectionnez « Maps SDK pour Android » dans la section « API supplémentaires », puis sélectionnez « ACTIVER ».
  • Pour activer Google Maps pour iOS, sélectionnez « Maps SDK pour iOS » dans la section « API supplémentaires », puis sélectionnez « ACTIVER ».
  • Assurez-vous que les API que vous avez activées se trouvent dans la section « API activées ».

• Vous pouvez également trouver des étapes détaillées pour démarrer avec Google Maps Platform ici.

Android

Spécifiez votre clé API dans le manifeste de l’application android/app/src/main/AndroidManifest.xml:

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

REMARQUE: À partir de la version 3.0.0, le plug-in de géolocalisation est passé à la version AndroidX des bibliothèques de support Android. Cela signifie que vous devez vous assurer que votre projet Android est également mis à niveau pour prendre en charge AndroidX. Des instructions détaillées peuvent être trouvées ici.

La version TL; DR est :

1. Ajoutez ce qui suit à votre fichier « gradle.properties »:

android.useAndroidX=true
android.enableJetifier=true

2. Assurez-vous de définir le compileSdkVersion dans votre fichier « android/app/build.gradle » à 28 :

android {
 compileSdkVersion 28

 ...
}

3. Assurez-vous de remplacer tous les android. dépendances à leurs homologues AndroidX (une liste complète peut être trouvée ici : https://developer.android.com/jetpack/androidx/migrate).

iOS

Spécifiez votre clé API dans le délégué de l’application ios/Runner/AppDelegate.m:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Ou dans votre code Swift, spécifiez votre clé API dans le délégué de l’application ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Sur iOS, vous devrez ajouter les entrées suivantes à votre fichier Info.plist (situé sous ios/Runner) afin d’accéder à l’emplacement de l’appareil.

Ouvrez simplement votre fichier Info.plist et ajoutez ce qui suit :

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs access to location when open and in the background.</string>

De plus, vous devez ajouter le Background Modes capacité à votre projet XCode (Projet> Signature et Capacités> bouton « + Capacité ») et sélectionnez Location Updates.g>Cette application a besoin d’accéder à l’emplacement lorsqu’elle est ouverte et en arrière-plan.

Activez l’aperçu des vues intégrées en ajoutant une propriété booléenne à l’application Info.plist fichier avec la clé io.flutter.embedded_views_preview et la valeur YES.

<key>io.flutter.embedded_views_preview</key>
<true/>

Usage

Utilisation de base

Vous pouvez utiliser PlacePicker en poussant vers une nouvelle page à l’aide de Navigator, OU en tant qu’enfant de n’importe quel widget. Lorsque l’utilisateur choisit un lieu sur la carte, il renverra le résultat à ‘onPlacePicked’ avec le type PickResult. Alternativement, vous pouvez créer votre propre chemin avec ‘selectedPlaceWidgetBuilder’ et en extraire le résultat (voir les instructions ci-dessous).

Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PlacePicker(
          apiKey: APIKeys.apiKey,   // Put YOUR OWN KEY here.
          onPlacePicked: (result) { 
            print(result.address); 
            Navigator.of(context).pop();
          },
          initialPosition: HomePage.kInitialPosition,
          useCurrentLocation: true,
        ),
      ),
    );

ChoisirRésultat

** Les résultats ci-dessous seront récupérés uniquement lors de l’utilisation de la recherche semi-automatique ou lorsque usePlaceDetailSearch est défini sur true lors de la recherche en faisant glisser la carte.

PickResult (facultatif)

Plus d’informations sur les résultats au document Google.

PlacePicker

Plus d’informations à propos de la recherche semi-automatique sur Google document.

Personnalisation de la visualisation des lieux sélectionnés

Par défaut, lorsqu’un utilisateur choisit un lieu en utilisant la recherche complète automatique ou en faisant glisser la carte, nous affichons les informations en bas de l’écran (FloatingCard).

Cependant, si vous n’aimez pas cette UI/UX, remplacez simplement le constructeur en utilisant ‘selectedPlaceWidgetBuilder’. Le widget FlocationCard peut être réutilisé et flotter sur l’écran ou créer un tout nouveau widget comme vous le souhaitez. Il est empilé avec la carte, vous pouvez donc utiliser le Positionné widget.

Notez que l’utilisation de cette personnalisation N’INVOQUERA PAS [onPlacePicked] rappel car il remplacera le bouton « Sélectionner ici » par défaut sur la carte flottante

...
PlacePicker(apiKey: APIKeys.apiKey,
            ...
            selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
              return isSearchBarFocused
                  ? Container()
                  // Use FloatingCard or just create your own Widget.
                  : FloatingCard(
                      bottomPosition: 0.0,    // MediaQuery.of(context) will cause rebuild. See MediaQuery document for the information.
                      leftPosition: 0.0,
                      rightPosition: 0.0,
                      width: 500,
                      borderRadius: BorderRadius.circular(12.0),
                      child: state == SearchingState.Searching ? 
                                      Center(child: CircularProgressIndicator()) : 
                                      RaisedButton(onPressed: () { print("do something with [selectedPlace] data"); },),
                   );
            },
            ...
          ),
...

Personnalisation de l’épingle

Par défaut, l’icône Pin est fournie avec une animation de sélection très simple lors des déplacements. Cependant, vous pouvez également créer votre propre widget pin en utilisant ‘pinBuilder’

PlacePicker(apiKey: APIKeys.apiKey,
            ...
            pinBuilder: (context, state) {
                  if (state == PinState.Idle) {
                    return Icon(Icons.favorite_border);
                  } else {
                    return AnimatedIcon(.....);
                  }
                },
            ...                        
          ),
...

Changer les couleurs de la FloatingCard par défaut

Bien que vous puissiez créer votre propre mosaïque de prédiction, vous pouvez toujours modifier le style de la mosaïque par défaut à l’aide de themeData comme ci-dessous :

// Light Theme
final ThemeData lightTheme = ThemeData.light().copyWith(
  // Background color of the FloatingCard
  cardColor: Colors.white,
  buttonTheme: ButtonThemeData(
    // Select here's button color
    buttonColor: Colors.black,
    textTheme: ButtonTextTheme.primary,
  ),
);

// Dark Theme
final ThemeData darkTheme = ThemeData.dark().copyWith(
  // Background color of the FloatingCard
  cardColor: Colors.grey,
  buttonTheme: ButtonThemeData(
    // Select here's button color
    buttonColor: Colors.yellow,
    textTheme: ButtonTextTheme.primary,
  ),
);

Demandes de fonctionnalités et problèmes

Veuillez soumettre les demandes de fonctionnalités et les bogues à l’adresse Traqueur d’incidents.

Autres forfaits utiles qui pourraient vous intéresser

Authentification Firebase simplifiée
Conception matérielle Cadran abrégé

Bifurqué à partir du package d’origine qui n’est plus actif

Sélecteur de lieux Google Maps

GitHub

Voir Github