Flutter地点搜索插件flutter_google_places_sdk的使用

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

Flutter地点搜索插件flutter_google_places_sdk的使用

flutter_google_places_sdk

pub package Tests

这是一个Flutter插件,用于集成Google Places SDK,并在每个平台上使用原生库。查看以下Rational部分,以了解为什么你应该使用这个插件。

使用方法

要使用此插件,请将flutter_google_places_sdk作为依赖项添加到您的pubspec.yaml文件中。

Web 使用

当您在Web上使用时,还需要启用google cloud中的Maps JavaScript API: 获取API密钥

限制:

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

1 回复

更多关于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配置

  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 Play服务依赖:
dependencies {
    implementation 'com.google.android.gms:play-services-location:18.0.0'
    implementation 'com.google.android.libraries.places:places:2.4.0'
}
  1. 创建一个文件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配置

  1. 打开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>
  1. ios/Runner/AppDelegate.swift中,确保你导入了Google Places库:
import GooglePlaces
  1. AppDelegatedidFinishLaunchingWithOptions方法中添加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的权限。

回到顶部