Flutter地点自动完成插件google_place_autocomplete的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter 地点自动完成插件 google_place_autocomplete 的使用

google_place_autocomplete 是一个用于在 Flutter 应用中集成 Google Places API 的插件，提供地点自动完成功能。用户可以实时搜索地点并查看建议的地点列表。

特性

  • API Key: 需要一个 Google Maps API 密钥 (googleMapApiKey) 来访问 Google Places API。
  • 语言支持: 可以指定自动完成建议的语言（例如，‘en’ 表示英语，‘fr’ 表示法语）。默认为 ‘fr’。
  • 预测选择回调: 当用户从自动完成建议中选择一个地点时调用 onPredictionSelected 回调函数。
  • 可自定义加载文本: 可以通过 loadingText 参数自定义加载建议时显示的文本，默认为 “Loading…”。

开始使用

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  google_place_autocomplete: latest_version

然后运行 flutter pub get 安装依赖。

示例代码

以下是一个完整的示例，展示如何在 Flutter 应用中使用 GooglePlaceAutocomplete 小部件：

import 'package:flutter/material.dart';
import 'package:google_place_autocomplete/google_place_autocomplete.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Place Autocomplete Example'),
      ),
      body: GooglePlaceAutocomplete(
        googleMapApiKey: 'YOUR_API_KEY', // 替换为你的 Google Maps API 密钥
        onPredictionSelected: (prediction) {
          print('Selected location: ${prediction.description}');
          // 处理选中的地点
        },
        language: 'en', // 可选：指定建议的语言
        loadingText: 'Please wait...', // 可选：自定义加载文本
      ),
    );
  }
}

更多关于Flutter地点自动完成插件google_place_autocomplete的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter地点自动完成插件google_place_autocomplete的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用google_place_autocomplete插件来实现地点自动完成的代码示例。这个插件允许用户通过输入关键字来搜索地点，并从下拉列表中选择一个地点。

首先，你需要在你的pubspec.yaml文件中添加google_place_autocomplete依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6  # 如果你还需要显示地图
  google_place_autocomplete: ^2.0.0  # 添加此依赖

然后运行flutter pub get来安装依赖。

接下来，你需要配置你的Android和iOS项目以使用Google Places API。这通常涉及获取API密钥并在相应的配置文件中进行设置。

Android配置

  1. 在android/app/src/main/AndroidManifest.xml中添加以下权限：
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
  1. 在android/app/build.gradle文件中添加Google服务依赖：
dependencies {
    implementation 'com.google.android.gms:play-services-location:18.0.0'
    implementation 'com.google.android.libraries.places:places:2.4.0'
}

iOS配置

  1. 在ios/Runner/Info.plist中添加以下键：
<key>NSLocationWhenInUseUsageDescription</key>
<string>Need location access to find places</string>
<key>io.flutter.embedded_views_preview</key>
<true/>
  1. 在Xcode中，确保你的项目配置了正确的API密钥（通常在GoogleService-Info.plist中设置，如果你使用的是Firebase）。

Flutter代码实现

以下是一个简单的Flutter应用示例，展示了如何使用google_place_autocomplete插件：

import 'package:flutter/material.dart';
import 'package:google_place_autocomplete/google_place_autocomplete.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _key = GlobalKey<FormState>();
  String _selectedPlace = '';

  Future<Null> _selectLocation(BuildContext context) async {
    final PlaceResult result = await showSearch(
      context: context,
      delegate: PlaceAutocompleteDelegate(),
    );

    if (result != null) {
      setState(() {
        _selectedPlace = result.description;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Place Autocomplete Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Form(
          key: _key,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Selected Place'),
                enabled: false,
                initialValue: _selectedPlace,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => _selectLocation(context),
                child: Text('Select Location'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例创建了一个简单的Flutter应用，其中包含一个文本字段和一个按钮。当用户点击按钮时，将显示一个地点搜索界面。用户可以选择一个地点，选择的地点将显示在文本字段中。

请注意，为了使用这个插件，你需要在Google Cloud Console中启用Places API，并获取一个API密钥。然后，你需要在插件的配置中设置这个API密钥（通常在初始化插件时设置，但google_place_autocomplete插件的最新版本可能已经内置了处理API密钥的方式，具体请参考插件的官方文档）。

希望这个示例对你有帮助！如果你有任何其他问题，请随时提问。

回到顶部