Flutter地点自动补全插件autocomplete_google_places_widget的使用

autocomplete_google_places_widget是一个基于Flutter的默认Autocomplete小部件构建的插件，它利用Google Places API在用户输入时提供实时地点建议。本文将详细介绍如何使用这个插件，并提供一个完整的示例Demo。

特性

• 🎨 高度可定制：提供了丰富的定制选项来满足您的特定需求。
• 🕒 历史支持：包括历史记录支持，以便快速访问以前的搜索结果。
• 💳 会话令牌：使用会话令牌将用户的查询分组在一个会话中，确保有效的计费。
• ⏳ 反跳机制：实现了反跳机制以减少API调用的频率。

开始使用

首先，在您的Dart文件中导入该包：

import 'package:autocomplete_google_places_widget/autocomplete_google_places_widget.dart';

然后，在GPlacesAutoComplete小部件中添加您的Google API密钥：

GPlacesAutoComplete(
    googleAPIKey: _yourGoogleAPIKey,
    // 其他参数...
)

使用方法

GPlacesAutoComplete小部件有许多参数可以使用，以下是部分参数说明：

• googleAPIKey: Google API密钥，用于Places API。
• onOptionSelected: 用户选择一个选项时调用的回调函数。
• textFormFieldBuilder: 输入搜索查询的文本字段构建器。如果不提供，默认使用文本字段。
• menuBuilder: 选项视图构建器。
• menuOptionBuilder: 菜单中单个选项视图的构建器。
• debounceTime: 用户停止输入后等待的时间（毫秒），之后进行API请求。
• countries: 限制搜索的国家列表（两个字符的地区代码）。
• enableHistory: 是否启用历史记录保存功能。

完整示例Demo

以下是一个完整的示例，展示了如何在应用程序中集成和使用autocomplete_google_places_widget插件：

import 'dart:developer';
import 'package:autocomplete_google_places_widget/autocomplete_google_places_widget.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'GPlacesAutoComplete Widget Demo',
      home: MyHomePage(title: 'GPlacesAutoComplete Widget Demo'),
    );
  }
}

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 String _yourGoogleAPIKey = 'YOUR_GOOGLE_API_KEY'; // 替换为您的Google API Key
  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  bool isLoading = false;

  String _selectedPlace = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title, style: const TextStyle(fontSize: 16)),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Selected Place: $_selectedPlace'),
              const SizedBox(height: 16),
              GPlacesAutoComplete(
                googleAPIKey: _yourGoogleAPIKey,
                textEditingController: _textEditingController,
                focusNode: _focusNode,
                textFormFieldBuilder: (BuildContext context,
                    TextEditingController controller,
                    FocusNode focusNode,
                    VoidCallback onFieldSubmitted) {
                  return TextFormField(
                    controller: controller,
                    focusNode: focusNode,
                    onFieldSubmitted: (_) {
                      onFieldSubmitted();
                    },
                    decoration: InputDecoration(
                      prefixIcon: isLoading
                          ? Transform.scale(scale: 0.35, child: const CircularProgressIndicator())
                          : const Icon(Icons.search),
                      hintText: 'Search places...',
                      border: const OutlineInputBorder(),
                    ),
                  );
                },
                loadingCallback: (bool loading) {
                  setState(() {
                    isLoading = loading;
                  });
                },
                countries: const ['FR'],
                onOptionSelected: (option) {
                  log('onOptionSelected: ${option.description}');
                  setState(() {
                    _selectedPlace = option.description ?? '';
                  });
                },
                enableHistory: true,
                liteModeHistory: true,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton.small(
          onPressed: () {
            _textEditingController.clear();
            setState(() {
              _selectedPlace = '';
            });
          },
          tooltip: 'Clear',
          child: const Icon(Icons.delete),
        ),
      ),
    );
  }
}