flutter_google_places_web

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Web専用のFlutterパッケージで、Google Placesの自動補完用のインラインフォームフィールドを提供し、ユーザーがWebアプリケーション内で直接場所を検索して選択できるようにします。Webプラットフォーム専用に設計されており、GoogleのPlaces APIとシームレスに統合され、リアルタイムの候補表示と住所入力を可能にします。モバイル版とは異なり、このパッケージはWebでの使いやすさに焦点を当てており、ブラウザ環境における応答性のあるデザインとスムーズなインタラクションを保証します。完全なページリダイレクトや複雑な設定なしに、場所選択を簡素化します。

用途

ウェブベースの住所入力フォーム
旅行アプリにおける場所検索
住所の自動補完付きECチェックアウト
リアルタイム位置フィルタリング
ユーザープロファイルの設定と位置情報
オンライン予約システム

主な機能

Web最適化UIコンポーネント
リアルタイム Google プレースの自動補完
インラインフォームフィールドの統合
ブラウザ用のレスポンシブデザイン
Google API キーを使用した簡単な設定
場所の詳細情報の取得をサポート

適している対象

場所を認識するアプリを開発するウェブ開発者
高速な住所入力が必要なアプリケーション
WebでGoogle Places APIを使用しているプロジェクト
場所フィールドのUXに注力するフロントエンドチーム
開発者がネイティブモバイル依存を回避する

注意事項

有効な Google Cloud Platform API キーが必要です
ウェブプラットフォームのみ対応
外部のGoogle Places APIに依存しています
CORS 設定が必要になる可能性があります
パフォーマンスはネットワーク速度に依存します
モバイルプラットフォームと互換性がありません

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Flutter Google Places Web

A web designed form field for Google Places Autocomplete

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

パッケージ、リポジトリ、アプリカテゴリを検索

パッケージをインストール