Flutter地点搜索插件flutter_google_places_sdk的使用
Flutter地点搜索插件flutter_google_places_sdk的使用
flutter_google_places_sdk
这是一个Flutter插件,用于集成Google Places SDK,并在每个平台上使用原生库。查看以下Rational部分,以了解为什么你应该使用这个插件。
使用方法
要使用此插件,请将flutter_google_places_sdk
作为依赖项添加到您的pubspec.yaml
文件中。
Web 使用
当您在Web上使用时,还需要启用google cloud中的Maps JavaScript API: 获取API密钥
限制:
- 位置限制不支持。更多详情请参见:Google问题追踪器
Rational
现在你可能已经找到了其他插件,并且想知道为什么创建了这个插件。原因在于所有其他插件都将使用HTTP网络请求而不是原生SDK。Google允许你将API密钥的使用限制在你的Android应用程序中。然而,这仅在使用原生SDK时有效。因此,当使用HTTP网络请求方法时,你实际上无法限制它,如果有人获得了你的API密钥(通常在移动客户端中不是问题),它可以在外部任何地方使用。
示例代码
下面是一个简单的示例demo,展示了如何使用flutter_google_places_sdk
插件:
import 'package:flutter/material.dart';
import 'package:flutter_google_places_sdk/flutter_google_places_sdk.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Google Places SDK Example',
theme: ThemeData(
primaryColor: Colors.blueAccent,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late final FlutterGooglePlacesSdk _places;
String? _predictLastText;
@override
void initState() {
super.initState();
// 初始化Google Places SDK
_places = FlutterGooglePlacesSdk('YOUR_API_KEY', locale: 'zh-CN');
_places.isInitialized().then((value) {
debugPrint('Places Initialized: $value');
});
}
void _onPredictTextChanged(String value) {
_predictLastText = value;
}
void _predict() async {
if (_predictLastText?.isNotEmpty ?? false) {
try {
final result = await _places.findAutocompletePredictions(_predictLastText!);
setState(() {
// 处理预测结果
print('Result: ${result.predictions}');
});
} catch (err) {
print('Error: $err');
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Google Places SDK Example'),
),
body: Padding(
padding: EdgeInsets.all(30),
child: Column(
children: [
TextFormField(
onChanged: _onPredictTextChanged,
decoration: InputDecoration(label: Text("Query")),
),
ElevatedButton(
onPressed: () => _predict(),
child: const Text('Predict'),
),
],
),
),
);
}
}
在这个示例中,我们首先初始化了FlutterGooglePlacesSdk
,然后通过一个文本输入框接收用户输入的地点查询字符串,并调用findAutocompletePredictions
方法进行预测。预测结果会在控制台打印出来。你可以根据需要修改和扩展这个示例,例如将预测结果显示在界面上或者处理更多的错误情况。
请注意,你需要替换YOUR_API_KEY
为你的实际Google Places API密钥,并确保该密钥已经在Google Cloud Console中正确配置了相关权限。
更多关于Flutter地点搜索插件flutter_google_places_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter地点搜索插件flutter_google_places_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用flutter_google_places_sdk
插件来实现地点搜索功能的示例代码。这个插件允许你使用Google Places API来搜索地点,并展示搜索结果。
首先,确保你已经在你的pubspec.yaml
文件中添加了flutter_google_places_sdk
依赖:
dependencies:
flutter:
sdk: flutter
flutter_google_places_sdk: ^0.2.13+1 # 请注意版本号,使用最新版本
然后,运行flutter pub get
来安装依赖。
接下来,你需要在Android和iOS项目中配置Google Places API的API密钥。
Android配置
- 打开
android/app/src/main/AndroidManifest.xml
文件,确保你有以下权限:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
- 在
android/app/build.gradle
文件中,添加Google Play服务依赖:
dependencies {
implementation 'com.google.android.gms:play-services-location:18.0.0'
implementation 'com.google.android.libraries.places:places:2.4.0'
}
- 创建一个文件
android/app/src/main/res/values/google_maps_api.xml
,并添加你的API密钥:
<resources>
<string name="google_maps_api_key" templateMergeStrategy="preserve" translatable="false">YOUR_API_KEY_HERE</string>
</resources>
iOS配置
- 打开
ios/Runner/Info.plist
文件,并添加以下权限:
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
- 在
ios/Runner/AppDelegate.swift
中,确保你导入了Google Places库:
import GooglePlaces
- 在
AppDelegate
的didFinishLaunchingWithOptions
方法中添加API密钥:
GMSPlacesClient.provideAPIKey("YOUR_API_KEY_HERE")
Flutter代码
接下来,在你的Flutter项目中实现地点搜索功能。以下是一个基本的示例:
import 'package:flutter/material.dart';
import 'package:flutter_google_places_sdk/flutter_google_places_sdk.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Google Places SDK Example'),
),
body: PlaceSearchScreen(),
),
);
}
}
class PlaceSearchScreen extends StatefulWidget {
@override
_PlaceSearchScreenState createState() => _PlaceSearchScreenState();
}
class _PlaceSearchScreenState extends State<PlaceSearchScreen> {
final TextEditingController _searchController = TextEditingController();
List<Prediction> _predictions = [];
void _handleSearch() async {
try {
PredictionResult predictionsResult = await PlacesAutocomplete.show(
context: context,
apiKey: "YOUR_API_KEY_HERE",
language: "en",
components: [Component(Component.CountryCodeType, "us")],
type: "geocode",
);
if (predictionsResult == null || predictionsResult.status != 'OK') {
return;
}
setState(() {
_predictions = predictionsResult.predictions;
});
} catch (e) {
print("Error: $e");
}
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
controller: _searchController,
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
hintText: 'Search places...',
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: _handleSearch,
),
),
),
SizedBox(height: 16),
Expanded(
child: _predictions.isEmpty
? Center(child: Text('No predictions'))
: ListView.builder(
itemCount: _predictions.length,
itemBuilder: (context, index) {
Prediction prediction = _predictions[index];
return ListTile(
title: Text(prediction.description ?? ''),
);
}),
),
],
),
);
}
}
这个示例展示了如何使用flutter_google_places_sdk
来搜索地点,并将搜索结果展示为一个列表。请注意,你需要将YOUR_API_KEY_HERE
替换为你自己的Google Places API密钥。
此外,请确保你已经为你的应用配置了适当的权限,并且你的API密钥具有使用Google Places API的权限。