Flutter地点搜索插件google_search_place的使用

Flutter地点搜索插件google_search_place的使用

插件介绍

google_search_place 是一个用于在所有平台上实现自定义Google地点自动完成的小部件。

开始使用

添加依赖

你可以通过以下命令添加 google_search_place 作为依赖项，并使用最新稳定版本：

$ dart pub add google_search_place

或者你可以在 pubspec.yaml 文件中的 dependencies 部分手动添加 google_search_place：

dependencies:
  google_search_place: ^replace-with-latest-version

最新版本是：

包括预发布版本的最新版本是：

在升级之前请注意：

• 主版本和次版本可能会发生破坏性更改。
• 查看[迁移指南][迁移指南]以获取完整的破坏性更改列表。

超简单的使用方法

import 'package:google_search_place/google_search_place.dart';

final TextEditingController _searchPlaceController = TextEditingController();

SearchPlaceAutoCompletedTextField(
  googleAPIKey: "", // 替换为你的 Google API 密钥
  controller: _searchPlaceController,
  itmOnTap: (Prediction prediction) {
    _searchPlaceController.text = prediction.description ?? ""; // 设置搜索结果的描述

    _searchPlaceController.selection = TextSelection.fromPosition(TextPosition(offset: prediction.description?.length ?? 0)); // 设置光标位置
  },
  getPlaceDetailWithLatLng: (Prediction prediction) {
    _searchPlaceController.text = prediction.description ?? ""; // 设置搜索结果的描述

    _searchPlaceController.selection = TextSelection.fromPosition(TextPosition(offset: prediction.description?.length ?? 0)); // 设置光标位置

    debugPrint("${prediction.lat} ${prediction.lng}"); // 打印地点的经纬度
  }
)

自定义选项

你可以自定义文本字段输入装饰和防抖时间。

完整示例代码

以下是完整的示例代码，展示了如何使用 google_search_place 插件：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_search_place/google_search_place.dart';
import 'package:google_search_place/model/prediction.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '搜索Google地点',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '搜索Google地点'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _searchPlaceController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SearchPlaceAutoCompletedTextField(
            googleAPIKey: "GOOGLE_API_KEY", // 替换为你的 Google API 密钥
            controller: _searchPlaceController,
            itmOnTap: (Prediction prediction) {
              _searchPlaceController.text = prediction.description ?? ""; // 设置搜索结果的描述

              _searchPlaceController.selection = TextSelection.fromPosition(
                  TextPosition(
                      offset: prediction.description?.length ?? 0)); // 设置光标位置
            },
            getPlaceDetailWithLatLng: (Prediction prediction) {
              _searchPlaceController.text = prediction.description ?? ""; // 设置搜索结果的描述

              _searchPlaceController.selection = TextSelection.fromPosition(
                  TextPosition(
                      offset: prediction.description?.length ?? 0)); // 设置光标位置

              // 获取搜索地点的经纬度
              debugPrint("${prediction.lat} ${prediction.lng}");

              // 获取地点详情
              debugPrint("地点详情 : ${prediction.placeDetails}");
            },
          ),
        ),
      ),
    );
  }
}