Flutter地点搜索建议插件google_places_suggestions_autocomplete_field的使用

Flutter地点搜索建议插件google_places_suggestions_autocomplete_field的使用

示例在macOS上

google_places_suggestions_autocomplete_field 是一个为 Flutter 应用提供的表单文本字段插件，用于通过 Google Places API 进行地点搜索和自动补全。该组件不仅会将文本返回到提供的控制器中，还会通过回调函数提供详细的地点信息。返回的地点详情包括：

• 完整地址
• 城市
• 邮政/邮政编码
• 国家
• 经纬度坐标
• 省份
• 郊区

该库高度可定制，允许你指定地点搜索应限制的国家，并且可以自定义UI属性，如提示文本、背景颜色和文本样式。

特性

• 根据用户输入提供地点建议。
• 从 Google Places API 获取详细地点信息。
• 返回完整的地址详情，包括城市、邮政编码、国家、纬度、经度、省份和地区。
• 支持对搜索结果进行自定义国家限制。
• 可以自定义UI组件，如文本样式、提示文本和建议列表的背景颜色。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
    google_places_suggestions_autocomplete_field: [最新版本]

然后运行：

flutter pub get

使用

基本用法示例

下面是如何将 GooglePlacesSuggestionsAutoCompleteField 小部件集成到你的 Flutter 应用中的示例：

class LocationPicker extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Places 自动补全'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: GooglePlacesSuggestionsAutoCompleteField(
          controller: TextEditingController(), // 控制器管理文本输入
          googleAPIKey: "YOUR_GOOGLE_API_KEY_HERE", // 你的 Google Places API 密钥
          countries: "za", // 将搜索限制到南非（使用 ISO 3166-1 alpha-2 代码）
          onPlaceSelected: (place) {
            debugPrint("Selected place: ${jsonEncode(place.toJson())}");
          },
        ),
      ),
    );
  }
}

参数解释

1. controller（必需）：TextEditingController 控制文本字段中的输入，并可用于检索选中的地址作为字符串。

2. googleAPIKey（必需）：你的 Google Places API 密钥，用于认证并获取地点建议。确保此 API 密钥已设置适当的计费和权限以使用 Google Places API。

3. onPlaceSelected（必需）：当从建议列表中选择一个地点时触发的回调函数。这会返回一个包含详细位置数据（地址、城市、邮政编码、国家、经纬度、省份和地区）的 Place 对象。

4. countries（可选）：逗号分隔的国家代码（ISO 3166-1 alpha-2），用于将地点搜索结果限制在特定国家。默认值为 “za”（南非）。

5. hint（可选）：在文本字段中显示的提示文本（默认为 “Address”）。

6. decoration（可选）：用于文本字段的自定义 InputDecoration。如果没有提供，则会使用带有位置图标和边框的默认装饰。

7. suggestionBackgroundColor（可选）：建议列表的背景颜色。默认颜色为白色（Colors.white）。

8. suggestionDividerColor（可选）：建议之间的分隔线颜色。默认颜色为深黑色（Colors.black87）。

9. suggestionTextStyle（可选）：建议下拉列表中显示的自定义文本样式。如果没有提供，则会使用默认字体样式。

包含可选字段的示例

下面是一个演示如何使用可选字段来自定义小部件外观的示例：

class LocationPicker extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Places 自动补全'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: GooglePlacesSuggestionsAutoCompleteField(
          controller: TextEditingController(), // 管理输入文本字段
          googleAPIKey: "YOUR_GOOGLE_API_KEY_HERE", // 你的 Google API 密钥
          hint: "搜索地点", // 输入字段的自定义提示文本
          decoration: InputDecoration(
            labelText: "输入地址",
            border: OutlineInputBorder(),
            prefixIcon: Icon(Icons.search),
          ), // 文本字段的自定义装饰
          suggestionBackgroundColor: Colors.lightBlue.shade50, // 建议列表的背景颜色
          suggestionDividerColor: Colors.blueAccent, // 建议之间的分隔线颜色
          suggestionTextStyle: TextStyle(
            fontSize: 16,
            color: Colors.blueAccent,
          ), // 建议的自定义文本样式
          countries: "us,ca,mx", // 将地点搜索限制在美国、加拿大和墨西哥
          locationType: "geocode", // 使用地理编码以返回地理坐标
          onPlaceSelected: (place) {
            debugPrint("Selected place: ${jsonEncode(place.toJson())}");
          }, // 处理所选地点数据的回调函数
        ),
      ),
    );
  }
}