Flutter地点选择插件places_picker的使用

简介

places_picker 是一个基于 Flutter 的插件，用于通过 Google Maps 实现地点选择功能。该项目依赖于以下包：

• 使用 Flutter 官方的 google_maps_flutter 显示地图。
• 使用 Baseflow 的 geolocator 获取当前位置。
• 使用 hadrienlejard 的 google_maps_webservice 调用 Place 和 Geocoding API。
• 使用 kevmoo 的 tuple 构建器。

预览

支持

如果该插件对您有用或节省了您的时间，请不要犹豫，为我买一杯咖啡！😉
更多咖啡意味着未来我可以制作更有用的项目。

开始使用

获取 API 密钥

1. 在 Google Cloud Console 获取 API 密钥。
2. 启用 Google Maps SDK for Android 和 iOS。

Android

在 android/app/src/main/AndroidManifest.xml 中指定 API 密钥：

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

注意: 从版本 3.0.0 开始，geolocator 插件切换到了 AndroidX。确保您的 Android 项目也升级到支持 AndroidX。详细步骤如下：

1. 在 gradle.properties 文件中添加：

   android.useAndroidX=true
   android.enableJetifier=true
   

2. 在 android/app/build.gradle 文件中将 compileSdkVersion 设置为 28：

   android {
       compileSdkVersion 28
   
       ...
   }
   

3. 将所有 android. 依赖替换为其对应的 AndroidX 版本（完整列表可在此处找到：AndroidX 迁移指南）。

iOS

在 ios/Runner/AppDelegate.m 中指定 API 密钥：

#import "AppDelegate.h"
#import "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

在 Swift 代码中，指定 API 密钥在 ios/Runner/AppDelegate.swift 中：

import UIKit
import Flutter
import GoogleMaps

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

在 iOS 上，您需要在 Info.plist 文件中添加以下条目以访问设备的位置信息：

<key>NSLocationWhenInUseUsageDescription</key>
<string>此应用需要在打开时访问位置。</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>此应用需要在后台访问位置。</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>此应用需要在打开和后台时访问位置。</string>

此外，您需要在 XCode 项目中启用 Location Updates 功能（项目 > 签名和能力 > “+” 按钮）。在 Info.plist 文件中添加以下键值对以启用嵌入式视图预览：

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

使用方法

基本用法

您可以使用 Navigator 推出一个新的页面，或者将其作为任何小部件的子级。当用户在地图上选择一个地点时，它会通过 onPlacePicked 回调返回结果，类型为 PickResult。

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PlacePicker(
      apiKey: APIKeys.apiKey,   // 替换为您的 API 密钥
      onPlacePicked: (result) { 
        print(result.address); 
        Navigator.of(context).pop();
      },
      initialPosition: HomePage.kInitialPosition,
      useCurrentLocation: true,
    ),
  ),
);

PickResult 参数说明

PickResult 可选参数说明

自定义选择地点的可视化效果

默认情况下，当用户通过自动完成搜索或拖动地图选择地点时，信息会显示在屏幕底部（FloatingCard）。

如果您不喜欢这种 UI/UX，可以使用 selectedPlaceWidgetBuilder 覆盖默认构建器。您可以复用 FloatingCard 或创建自己的小部件。它与地图堆叠在一起，因此可能需要使用 Positioned 小部件。

注意: 使用此自定义选项不会触发 onPlacePicked 回调，因为它会覆盖默认的“选择这里”按钮。

PlacePicker(
  apiKey: APIKeys.apiKey,
  ...
  selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
    return isSearchBarFocused
        ? Container()
        // 使用 FloatingCard 或创建自己的小部件。
        : FloatingCard(
            bottomPosition: 0.0,    // MediaQuery.of(context) 会导致重建。查看 MediaQuery 文档了解更多信息。
            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"); },),
         );
  },
  ...
),

selectedPlaceWidgetBuilder 参数说明

自定义标记

默认情况下，标记图标具有简单的移动动画。但是，您也可以使用 pinBuilder 创建自己的标记小部件。

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

pinBuilder 参数说明

更改默认 FloatingCard 的颜色

虽然您可以构建自己的预测小部件，但仍然可以通过 themeData 修改默认小部件的样式。

Light 主题

final ThemeData lightTheme = ThemeData.light().copyWith(
  // FloatingCard 的背景颜色
  cardColor: Colors.white,
  buttonTheme: ButtonThemeData(
    // “选择这里”按钮的颜色
    buttonColor: Colors.black,
    textTheme: ButtonTextTheme.primary,
  ),
);

Dark 主题

final ThemeData darkTheme = ThemeData.dark().copyWith(
  // FloatingCard 的背景颜色
  cardColor: Colors.grey,
  buttonTheme: ButtonThemeData(
    // “选择这里”按钮的颜色
    buttonColor: Colors.yellow,
    textTheme: ButtonTextTheme.primary,
  ),
);