Flutter地点选择插件place_picker_v2的使用

Flutter 地点选择插件 place_picker_v2 的使用

Flutter 地点选择插件 place_picker_v2 #

在 Flutter 中，place_picker_v2 是一个用于选择地点的插件。它支持暗主题和自定义本地化。

注意：此库不会受到此处指示的弃用影响。

提醒：请确保启用 Places API、Maps SDK for Android、Maps SDK for iOS 和 Geocoding API。

使用方法 #

要使用此插件，请将其作为依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  place_picker_v2: ^版本号

然后运行 flutter pub get 来安装插件。

入门指南 #

该插件依赖于 google_maps_flutter 显示地图。请遵循以下指南将 API 密钥添加到 Android 和 iOS 包中。

Android #

在应用清单文件 android/app/src/main/AndroidManifest.xml 中指定您的 API 密钥并添加 ACCESS_FINE_LOCATION 权限：

<manifest ...

  <!-- 添加此权限 -->
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

  <application ...
    <!-- 在此处添加您的 API 密钥 -->
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>
    <activity ..../>
  </application>
</manifest>

更新您的 gradle.properties 文件：

android.enableJetifier=true
android.useAndroidX=true
org.gradle.jvmargs=-Xmx1536M

请确保在 build.gradle 文件中包含以下依赖项：

// 父级 build.gradle (android/build.gradle)
dependencies {
    classpath 'com.android.tools.build:gradle:3.3.0'
    classpath 'com.google.gms:google-services:4.2.0'
}
...

// 应用级 build.gradle (android/app/build.gradle)
compileSdkVersion 28

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)
  }
}

确保在应用的 Info.plist 文件中启用嵌入视图预览，并添加位置请求所需的权限：

<!-- 添加 io.flutter.embedded_views_preview 键值对 -->
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

<!-- 添加位置权限 -->
<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to pick up your delivery location</string>

示例用法 #

首先，将插件导入到您的代码中：

import 'package:place_picker_v2/entities/location_result.dart';
import 'package:place_picker_v2/widgets/place_picker.dart';

创建一个方法，例如 showPlacePicker，并在按钮或 InkWell 的 onTap 事件中调用它。LocationResult 将返回所选地点的名称和经纬度。您可以根据需要处理结果。可以传递一个可选的 LatLng displayLocation 以显示特定位置。这在您希望地图显示之前选择的位置时非常有用。

void showPlacePicker() async {
  LocationResult? result = await Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => PlacePicker("YOUR API KEY")));

  // 处理结果
  print(result);
}

完整示例代码

import 'package:flutter/material.dart';
import 'package:place_picker_v2/entities/location_result.dart';
import 'package:place_picker_v2/widgets/place_picker.dart';

class PickerDemo extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => PickerDemoState();
}

class PickerDemoState extends State<PickerDemo> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Picker Example')),
      body: Center(
        child: TextButton(
          child: Text("Pick Delivery location"),
          onPressed: () {
            showPlacePicker();
          },
        ),
      ),
    );
  }

  void showPlacePicker() async {
    LocationResult? result = await Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => PlacePicker("YOUR API KEY")));

    // 处理结果
    print(result);
  }
}