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

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

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

Nova Places Autocomplete

Nova Places Autocomplete 是一个用于在 TextField 中搜索地点信息的插件,支持多种类别,包括企业、著名地标和地理位置。您可以根据距离或文本字符串进行搜索。每次搜索都会返回一个包含每个地点概要信息的列表。

此包使用了 Google Places API 并且需要 API 密钥。请访问 获取 API 密钥 页面以获取您的 API 密钥。

记得为您的 API 密钥启用 Places API

示例代码

import 'package:nova_places_autocomplete/nova_places_autocomplete.dart';

NovaPlacesAutocomplete(
  apiKey: 'api-key',
  detailRequired: true,
  onPicked: (prediction) {
    print(prediction);
  },
  onSearchFailed: (error) {
    print(error);
  },
  onPickedPlaceDetail: (detail) {
    print(detail);
  },
)

完整示例 demo

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

///
///
///
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PlaceAutocompletePrediction? _prediction;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Find Places'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              NovaPlacesAutocomplete(
                apiKey: 'api-key',
                detailRequired: true,
                onPicked: (prediction) {
                  print(prediction);
                  setState(() {
                    _prediction = prediction;
                  });
                },
                onSearchFailed: (error) {
                  print(error);
                },
                onPickedPlaceDetail: (detail) {
                  print(detail);
                },
              ),
              const SizedBox(height: 1140.0),
              if (_prediction != null) Text(_prediction!.description),
            ],
          ),
        ),
      ),
    );
  }
}

使用说明

  1. 首先,在 pubspec.yaml 文件中添加 nova_places_autocomplete 插件:
    dependencies:
      nova_places_autocomplete: ^x.x.x
    

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

1 回复

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


当然,以下是如何在Flutter项目中使用nova_places_autocomplete插件来实现地点自动完成的示例代码。这个插件可以帮助你集成Google Places API,从而在应用中实现地点搜索和自动完成功能。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加nova_places_autocomplete依赖:

dependencies:
  flutter:
    sdk: flutter
  nova_places_autocomplete: ^最新版本号  # 替换为最新版本号

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

2. 配置API密钥

由于nova_places_autocomplete依赖于Google Places API,你需要一个有效的API密钥。请确保你的API密钥已经启用了Places API,并且在Android和iOS项目中进行了适当的配置。

对于Android,你可以在android/app/src/main/AndroidManifest.xml中添加API密钥:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="你的API密钥" />

对于iOS,你需要在ios/Runner/Info.plist中添加API密钥(虽然通常是通过环境变量或GoogleService-Info.plist配置,但直接添加也是一种方式):

<key>GOOGLE_API_KEY</key>
<string>你的API密钥</string>

然而,为了安全起见,推荐使用.env文件或直接在Xcode/Android Studio中配置API密钥。

3. 使用插件

在你的Flutter项目中,你可以按照以下方式使用nova_places_autocomplete插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('地点自动完成示例'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: PlacesAutocompleteWidget(
            apiKey: '你的API密钥',  // 注意:这里只是为了示例,实际中应避免硬编码API密钥
            language: 'en',
            components: [PlaceType.geocode],
            onPlaceSelected: (PlaceDetails place) {
              // 用户选择了一个地点
              print('Place: ${place.name}, ${place.geometry?.location?.lat}, ${place.geometry?.location?.lng}');
            },
            onError: (String errorMessage) {
              // 发生错误时回调
              print('Error: $errorMessage');
            },
          ),
        ),
      ),
    );
  }
}

4. 运行应用

确保你的开发环境已经配置好,并且API密钥有效。然后运行应用:

flutter run

现在你应该能够在应用中看到一个地点搜索栏,当你输入地点名称时,它会显示匹配的建议。

注意事项

  • API配额和费用:确保你了解Google Places API的配额限制和可能产生的费用。
  • 安全性:避免在代码中硬编码API密钥。考虑使用环境变量或配置文件来管理敏感信息。
  • 错误处理:在生产环境中,应该更细致地处理错误,比如网络错误、API配额超限等。

这个示例展示了基本的地点自动完成功能。根据你的需求,你可能需要进一步自定义UI或处理更多类型的地点数据。

回到顶部