Flutter地点自动完成插件google_places_autocomp的使用

google_places_autocomp 插件为你的 Flutter 应用程序提供了集成 Google 地点自动完成功能的简单接口。此插件简化了添加基于位置搜索的功能的过程，允许用户搜索地点并获取有关这些地点的详细信息。

功能

• 使用 Google 地点 API 进行地点自动完成搜索。
• 获取所选地点的详细信息。
• 可自定义的搜索参数和 UI 组件。
• 轻松集成到现有的 Flutter 应用程序中。

开始使用

要开始使用 google_places_autocomp 插件，你需要有一个启用 Google 地点 API 的 Google Cloud 项目。请按照以下步骤操作：

1. 在 Google Cloud 控制台 创建一个新项目。
2. 为你的项目启用地点 API。
3. 生成用于访问地点 API 的 API 密钥。
4. 将 API 密钥添加到你的 Flutter 应用程序中。

使用示例

以下是使用 google_places_autocomp 插件的基本示例：

import 'package:flutter/material.dart';
import 'package:google_places_autocomp/google_places_autocomp.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建一个 TextEditingController 实例来管理输入框的文本
    final controller = TextEditingController();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google 地点自动完成示例'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 使用 GooglePlacesAutoCompleteTextFormField 组件
              GooglePlacesAutoCompleteTextFormField(
                googleAPIKey: 'YOUR_API_KEY', // 替换为你的 API 密钥
                textEditingController: controller,
                placeholder: '请输入地点名称',
              ),
              SizedBox(height: 20),
              // 显示选择的地点信息
              Expanded(
                child: TextField(
                  controller: controller,
                  decoration: InputDecoration(hintText: '选择地点后显示详细信息'),
                  maxLines: null,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明

1. 导入必要的库：

   import 'package:flutter/material.dart';
   import 'package:google_places_autocomp/google_places_autocomp.dart';
   

2. 创建一个 TextEditingController 实例：

   final controller = TextEditingController();
   

3. 在 MaterialApp 中设置 Scaffold：

   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text('Google 地点自动完成示例'),
       ),
       body: Padding(
         padding: const EdgeInsets.all(16.0),
         child: Column(
           children: [
             // 使用 GooglePlacesAutoCompleteTextFormField 组件
             GooglePlacesAutoCompleteTextFormField(
               googleAPIKey: 'YOUR_API_KEY', // 替换为你的 API 密钥
               textEditingController: controller,
               placeholder: '请输入地点名称',
             ),
             SizedBox(height: 20),
             // 显示选择的地点信息
             Expanded(
               child: TextField(
                 controller: controller,
                 decoration: InputDecoration(hintText: '选择地点后显示详细信息'),
                 maxLines: null,
               ),
             ),
           ],
         ),
       ),
     ),
   );