搜尋套件、儲存庫與 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 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。