Flutter地点搜索插件awesome_place_search的使用

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

Flutter地点搜索插件awesome_place_search的使用

awesome_place_search 是一个用于在Flutter应用中集成地点搜索功能的插件。该插件允许用户通过自定义API进行地点搜索,并提供丰富的自定义选项。

功能特性

  • 可定制的地点搜索对话框UI。
  • 支持加载和错误状态显示。
  • 搜索输入字段和结果项的样式和装饰可定制。
  • 可选的国家过滤功能,限制搜索结果。
  • 可定制的搜索提示和错误消息。
  • 多种外观和感觉的定制选项。

安装步骤

pubspec.yaml 文件中添加依赖

dependencies:
  awesome_place_search: ^2.1.0

基本使用示例

以下是一个完整的示例代码,展示如何使用 awesome_place_search 插件:

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PredictionModel? prediction;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '地点搜索示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('地点搜索'),
        ),
        body: Center(
          child: prediction != null
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    _line(title: "描述", subTitle: prediction!.description!),
                    _line(
                        title: "坐标",
                        subTitle: "${prediction!.latitude}, ${prediction!.longitude}"),
                    _line(title: "地点ID", subTitle: prediction!.placeId!),
                    _line(
                        title: "二级文本",
                        subTitle: prediction!.structuredFormatting!.secondaryText!),
                  ],
                )
              : const Center(
                  child: Text('点击浮动按钮获取预测'),
                ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _searchPlaces,
          child: const Icon(Icons.add),
        ),
      ),
    );
  }

  void _searchPlaces() {
    AwesomePlaceSearch(
      context: context,
      apiKey: "Your Google Map Key",
      countries: ["ao", "pt"],
      dividerItemColor: Colors.grey.withOpacity(.5),
      dividerItemWidth: .5,
      elevation: 5,
      indicatorColor: Colors.blue,
      modalBorderRadius: 50.0,
      onTap: (value) async {
        final result = await value;
        setState(() {
          prediction = result;
        });
      },
    ).show();
  }

  Widget _line({required String title, required String subTitle}) {
    return RichText(
      text: TextSpan(
        children: [
          TextSpan(
            text: "$title: ",
            style: const TextStyle(
                fontWeight: FontWeight.w800, color: Colors.black, fontSize: 20),
          ),
          TextSpan(
            text: " $subTitle",
            style: const TextStyle(color: Colors.black, fontSize: 15),
          ),
        ],
      ),
    );
  }
}

参数说明

必需参数

  • apiKey: 地点搜索服务的API密钥。
  • context: 用于显示搜索模态框的构建上下文。
  • onTap: 当选择地点时触发的回调函数,接收一个解析为 PredictionModelFuture

可选参数

  • hint: 搜索输入字段中的提示文本(默认:“搜索地点…”)。
  • errorText: 搜索过程中发生错误时显示的文本(默认:“发生错误,请重试。”)。
  • modalBorderRadius: 搜索模态框的边框圆角(默认:12.0)。
  • loadingWidget: 加载搜索结果时显示的自定义小部件(默认:CircularProgressIndicator())。
  • searchTextFieldDecoration: 搜索输入字段的装饰(默认:InputDecoration())。
  • dividerItemColor: 搜索结果之间的分隔线颜色(默认:Colors.grey)。
  • dividerItemWidth: 搜索结果之间的分隔线宽度(默认:1.0)。
  • placeIconWidget: 搜索结果中地点图标的自定义小部件(默认:Icon(Icons.place))。
  • onErrorWidget: 发生错误时显示的自定义小部件(默认:Text(errorText))。
  • elevation: 搜索模态框的阴影(默认:4.0)。
  • countries: 限制搜索结果的国家代码列表(默认:[] - 无限制)。
  • indicatorColor: 加载指示器的颜色(默认:主题的主色)。
  • subtitleStyle: 搜索结果中副标题的文本样式(默认:TextStyle())。
  • invalidKeyWidget: API密钥无效时显示的自定义小部件(默认:Text("Invalid API key"))。
  • titleStyle: 搜索结果中标题的文本样式(默认:TextStyle())。
  • autofocus: 是否自动聚焦搜索字段(默认:false)。

以上示例展示了如何使用 awesome_place_search 插件来实现地点搜索功能,并提供了详细的参数配置说明。希望对您有所帮助!


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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用awesome_place_search插件来进行地点搜索的示例代码。这个插件可以帮助你实现基于用户输入的位置搜索功能。

首先,确保你已经在你的pubspec.yaml文件中添加了awesome_place_search依赖:

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

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

接下来,在你的Flutter项目中,你可以按照以下步骤来使用这个插件:

  1. 导入插件

在你的Dart文件中导入awesome_place_search插件:

import 'package:awesome_place_search/awesome_place_search.dart';
  1. 初始化插件并设置API Key

你需要一个Google Maps Places API的API Key。确保你已经从Google Cloud Platform获取了API Key,并启用了Places API。

void initPlaceSearch() async {
  // 初始化插件并设置API Key
  await AwesomePlaceSearch.init(
    apiKey: '你的Google Maps Places API Key', // 替换为你的API Key
    language: 'en', // 可选:设置搜索语言
    region: 'US'    // 可选:设置搜索区域
  );
}
  1. 搜索地点

你可以通过调用AwesomePlaceSearch.searchPlaces方法来搜索地点。以下是一个简单的示例,展示如何根据用户输入来搜索地点,并显示搜索结果。

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

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

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

class PlaceSearchScreen extends StatefulWidget {
  @override
  _PlaceSearchScreenState createState() => _PlaceSearchScreenState();
}

class _PlaceSearchScreenState extends State<PlaceSearchScreen> {
  final TextEditingController _controller = TextEditingController();
  List<PlacePrediction> _predictions = [];

  @override
  void initState() {
    super.initState();
    initPlaceSearch();
  }

  void initPlaceSearch() async {
    await AwesomePlaceSearch.init(
      apiKey: '你的Google Maps Places API Key', // 替换为你的API Key
      language: 'en',
      region: 'US'
    );
  }

  void _onSearchChanged(String query) async {
    setState(() {
      _predictions = [];
    });
    if (query.isNotEmpty) {
      final result = await AwesomePlaceSearch.searchPlaces(query);
      setState(() {
        _predictions = result;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Place Search'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Search for a place',
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    _controller.clear();
                    _onSearchChanged('');
                  },
                ),
              ),
              onChanged: _onSearchChanged,
            ),
            Expanded(
              child: _predictions.isEmpty
                  ? Center(child: Text('No predictions'))
                  : ListView.builder(
                      itemCount: _predictions.length,
                      itemBuilder: (context, index) {
                        final prediction = _predictions[index];
                        return ListTile(
                          title: Text(prediction.description ?? ''),
                          subtitle: Text(prediction.placeId ?? ''),
                          onTap: () {
                            // 处理点击事件,例如显示详细地点信息
                            print('Selected: ${prediction.description}');
                          },
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个文本输入框和一个用于显示搜索预测结果的ListView。当用户输入搜索查询时,会调用_onSearchChanged方法,该方法使用AwesomePlaceSearch.searchPlaces来获取搜索预测,并更新UI以显示这些预测。

确保你已经正确设置了Google Maps Places API的API Key,并且API Key具有足够的权限来访问Places API。如果你遇到任何问题,请检查API Key是否有效,以及是否已经在Google Cloud Platform上启用了Places API。

回到顶部