Flutter地点搜索插件awesome_place_search的使用
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
: 当选择地点时触发的回调函数,接收一个解析为PredictionModel
的Future
。
可选参数
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
更多关于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项目中,你可以按照以下步骤来使用这个插件:
- 导入插件:
在你的Dart文件中导入awesome_place_search
插件:
import 'package:awesome_place_search/awesome_place_search.dart';
- 初始化插件并设置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' // 可选:设置搜索区域
);
}
- 搜索地点:
你可以通过调用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。