搜索插件、代码仓与 APP 分类

flutter_google_places_web 封面
插件详情v1.0.2

flutter_google_places_web

一个专为 Google Places 自动补全设计的网页内联表单字段。适用于移动设备,请访问 https://github.com/fluttercommunity/flutter_google_places

Web
近 30 天下载
95
喜欢数
21
Pub 分数
140

安装插件

flutter pub add flutter_google_places_web

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个针对Web的Flutter包,提供Google Places自动补全的内联表单字段,使用户能够在Web应用程序中直接搜索和选择位置。专为Web平台设计,可与Google的Places API无缝集成,提供实时建议和地址输入。与移动版本不同,此包专注于Web用户体验,确保在浏览器环境中的响应式设计和流畅交互。它简化了位置选择过程,无需全页重定向或复杂的配置。

适合场景

  • 基于网络的地址输入表单
  • 旅行应用中的位置搜索
  • 电商结账地址自动补全
  • 实时位置过滤
  • 用户资料设置与地理位置
  • 在线预订系统

主要特点

  • Web优化的UI组件
  • 实时 Google 地点自动补全
  • 内联表单字段集成
  • 适用于浏览器的响应式设计
  • 使用 Google API 密钥的简单配置
  • 支持获取位置详细信息

适合对象

  • Web 开发人员构建位置感知应用程序
  • 需要快速地址输入的应用程序
  • 在网页上使用 Google Places API 的项目
  • 专注于位置字段用户体验的前端团队
  • 开发者避免原生移动依赖

使用建议

  • 需要有效的 Google Cloud Platform API 密钥
  • 仅限网页平台
  • 依赖外部 Google Places API
  • 可能需要配置 CORS
  • 性能取决于网络速度
  • 不兼容移动平台

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Flutter Google Places Web

pub version donate

A web designed form field for Google Places Autocomplete

flutterwebplaces

API key

To use this library you need a Web API key. Here

Usage

FlutterGooglePlacesWeb is a Google Places Autocomplete field for Flutter Web.

import  'package:flutter_google_places_web/flutter_google_places_web.dart';

FlutterGooglePlacesWeb(
apiKey: <GOOGLE_API_KEY>,
proxyURL: 'https://cors-anywhere.herokuapp.com/',
components: 'country:us',
),

If you have XMLHttpRequest errors, please use a proxy. For more information please see cors-anywhere

If you are using the demo CORS Anywhere proxy (included in the example) - please allow temporary access or use your own proxy

If a user types and selects 1600 Amphitheatre Parkway you can retrieve the data

String name = FlutterGooglePlacesWeb.value['name'];
String streetAddress = FlutterGooglePlacesWeb.value['streetAddress'];
String city = FlutterGooglePlacesWeb.value['city'];
String country = FlutterGooglePlacesWeb.value['country'];

print(name); // '1600 Amphitheatre Parkway, Mountain View, CA, USA'
print(streetAddress); // '1600 Amphitheatre Parkway'
print(city); // 'CA'
print(country); // 'USA'

Roadmap

  • [Coming soon] Add mutliplatform support and remove CORS issues by having javascript API rather than http requests

所属分类

依赖

依赖清单 3 项

源码仓库

使用此插件的项目

暂无相关数据。