Flutter地理表单插件geoform的使用
Flutter地理表单插件Geoform的使用
Flutter Geoform 是一个为Flutter应用程序设计的全面库，旨在实现交互式地图功能。它集成了地图可视化、表单处理、标记管理等功能，为Flutter应用中的地理空间数据处理提供了一个模块化且易于使用的解决方案。
概述
Flutter Geoform 集成了以下功能：
- 地图交互：与Flutter Map无缝集成，实现交互式地图处理。
- 标记管理：自定义标记，并扩展功能，包括动画和质心计算。
- Geoform Bloc：利用Bloc模式在Flutter应用中进行高效的状态管理。
- 可定制UI组件：包含一组用于显示地图相关信息和控件的部件，通常位于应用底部。
- 叠加支持：提供叠加功能以突出显示所选的地图元素。
- Geoform上下文和函数：通过专用的上下文和实用函数简化地图和标记的交互。
开始使用
本节提供逐步指南，帮助你在Flutter应用中实现Geoform。
步骤1：设置
确保你的系统上已安装了Flutter。将Flutter Geoform库添加到项目中，通过将其包含在pubspec.yaml文件中。
dependencies:
flutter:
sdk: flutter
flutter_geoform: ^x.y.z # 替换为实际版本号
运行flutter pub get来获取依赖项。
步骤2：导入库
在Dart文件中导入必要的Geoform库组件：
import 'package:flutter_geoform/flutter_geoform.dart';
步骤3：初始化Geoform
创建Geoform小部件并嵌入到应用中。配置必要的参数，如标题、表单构建器、标记构建器等。
class MyGeoformPage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Geoform<MyDataType, MyMarkerType>(
title: '我的Geoform地图',
formBuilder: (context, geoformContext) {
// 实现表单构建逻辑
},
markerBuilder: (markerData) {
// 实现标记构建逻辑
},
// 其他配置...
);
}
}
步骤4：配置标记和表单
定义如何构建标记以及当标记被选中时如何渲染表单。根据应用的需求实现自定义逻辑。
步骤5：处理事件和交互
利用Geoform提供的回调来处理用户交互，例如选择标记、提交表单或与地图交互。
步骤6：定制UI
如果需要，可以定制UI组件，例如底部面板或操作按钮。使用提供的构建器和样式来匹配应用的外观和感觉。
步骤7：运行和测试
运行应用并测试Geoform的功能。确保地图交互、标记放置和表单提交按预期工作。
示例
以下是一个简单的实现示例：
Geoform<MyDataType, MyMarkerType>(
title: '我的Geoform地图',
formBuilder: (context, geoformContext) {
return MyCustomForm(geoformContext);
},
markerBuilder: (markerData) {
return MyCustomMarker(markerData);
},
onMarkerSelected: (marker) {
print('标记选中: ${marker.id}');
},
// 其他配置...
);
将MyDataType和MyMarkerType替换为你特定的数据类型，并根据应用需求自定义表单和标记构建器。
示例代码
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:geoform/geoform_markers.dart';
import 'package:geoform/view/ui.dart';
import 'package:latlong2/latlong.dart';
import 'package:geoform/geoform.dart';
import 'package:flutter_map_tile_caching/flutter_map_tile_caching.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await FMTC.initialise();
await FMTC.instance.rootDirectory.migrator.fromV6(urlTemplates: []);
await FMTC.instance('mapStore').manage.createAsync();
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
[@override](/user/override)
void initState() {
super.initState();
initPlatformState();
}
Future<void> initPlatformState() async {
if (!mounted) return;
setState(() {});
}
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("欢迎使用Geoform")),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
Card(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: ElevatedButton(
child: const Text("前往Geoform"),
onPressed: () => Navigator.push<void>(
context,
MaterialPageRoute(
builder: (context) => const GeoPage(),
),
),
),
),
],
),
),
],
),
);
}
}
class GeoPage extends StatelessWidget {
const GeoPage({Key? key}) : super(key: key);
List<MyMarker> generateMarkers() {
final List<MyMarker> markers = [];
for (int i = 0; i < 128; i++) {
for (int j = 0; j < 128; j++) {
final double lat = -16.4090 + i / 10000.0;
final double lng = -71.5090 + j / 10000.0;
markers.add(
MyMarker(position: LatLng(lat, lng), code: '$i-$j'),
);
}
}
return markers;
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('插件示例应用'),
),
body: Geoform<MyMarker, MyMarker>(
title: "Geoform",
registerOnlyWithMarker: true,
registerWithManualSelection: true,
initialPosition: LatLng(-16.40904029, -71.509028501),
initialZoom: 18,
markers: generateMarkers(),
formBuilder: (BuildContext context, GeoformContext geoformContext) {
final mapPosition = geoformContext.currentMapPosition;
final userPosition = geoformContext.currentUserPosition;
return Scaffold(
appBar: AppBar(
title: const Text("Geoform"),
),
body: Center(
child: Column(
children: [
Text(
'地图位置: ${mapPosition.latitude}, ${mapPosition.longitude}'),
Text(
'用户位置: ${userPosition.latitude}, ${userPosition.longitude}'),
],
),
),
);
},
widgetsOnSelectedMarker: [
(_, geocontext) => Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GeoformActionButton(
icon: const Icon(Icons.map_outlined),
onPressed: () => showDialog(
context: context,
builder: (_) {
final lat = geocontext
.geostate.selectedMarker?.position.latitude;
final lng = geocontext
.geostate.selectedMarker?.position.longitude;
return AlertDialog(
title: const Text('信息'),
content:
geocontext.geostate.selectedMarker == null
? const Text("无数据")
: Text(
"$lat,$lng",
),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop<void>(context),
child: const Text(
'确定',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
),
),
),
],
);
},
),
),
],
),
),
),
],
additionalActionWidgets: [
(_, geocontext) => Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GeoformActionButton(
icon: const Icon(Icons.arrow_forward_rounded),
onPressed: () => showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: const Text('附加功能'),
content: const Text("前往指定点"),
actions: <Widget>[
TextButton(
onPressed: () async {
final mark = MyMarker(
position: LatLng(
-16.40904025,
-71.509028501,
),
code: "code",
);
geocontext.functions
.funcToMove(mark.position, 18);
await Future.delayed(
const Duration(seconds: 1))
.then((value) =>
Navigator.pop<void>(context));
geocontext.functions
.funcToSelectMarker(mark);
},
child: const Text(
'确定',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
),
),
),
],
);
},
),
),
const SizedBox(height: 8),
GeoformActionButton(
icon: const Icon(Icons.map),
onPressed: () => showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: const Text('当前地图位置'),
content: Text(
"${geocontext.currentMapPosition.latitude}, ${geocontext.currentMapPosition.longitude}"),
);
},
),
),
],
),
),
),
],
followUserPositionAtStart: false,
setManualModeOnAction: true,
bottomActionsBuilder: (
context,
actionActivated,
actionTextController,
geoformcontext,
onActionPressed,
onRegisterPressed,
) {
return Column(
children: [
if (actionActivated) ...[
const SizedBox(height: 16),
TextFormField(
autocorrect: false,
controller: actionTextController,
decoration: InputDecoration(
prefixText: geoformcontext
.geostate.selectedMarker!.position.latitude
.toString(),
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
),
labelText: "编辑",
hintStyle: TextStyle(color: Colors.grey[400]),
filled: true,
fillColor: Colors.white70,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
floatingLabelBehavior: FloatingLabelBehavior.always,
errorMaxLines: 2,
),
),
const SizedBox(height: 16),
],
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 8),
child: TextButton(
onPressed: onActionPressed,
style: ElevatedButton.styleFrom(
animationDuration: const Duration(milliseconds: 300),
shadowColor: Colors.transparent,
padding: const EdgeInsets.symmetric(
vertical: 16,
horizontal: 16,
),
textStyle: const TextStyle(fontSize: 18),
),
child: Text(actionActivated ? '取消' : '附加'),
),
),
Expanded(
child: ElevatedButton(
onPressed: onRegisterPressed,
style: ElevatedButton.styleFrom(
animationDuration: const Duration(milliseconds: 300),
shadowColor: Colors.transparent,
padding: const EdgeInsets.symmetric(vertical: 16),
textStyle: const TextStyle(fontSize: 18),
),
child: const Text('保存'),
),
),
],
),
],
);
},
),
);
}
}
class MyMarker implements GeoformMarkerDatum {
MyMarker({
required this.position,
required this.code,
});
[@override](/user/override)
final LatLng position;
final String code;
}
更多关于Flutter地理表单插件geoform的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter地理表单插件geoform的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter应用中使用geoform插件的示例代码。geoform插件通常用于收集地理位置数据，并将其以表单的形式提交。虽然geoform插件在Flutter社区中并不是一个官方的或广泛认知的插件，但我会假设它是一个用于地理表单提交的自定义插件或假设性插件，并给出一个类似的实现案例。
在实际应用中，你可能需要使用像geolocator这样的Flutter插件来获取地理位置数据，然后使用form_builder或自定义表单来收集其他相关数据。以下是一个结合这些概念的示例：
- 添加依赖项：
首先，在你的
pubspec.yaml文件中添加必要的依赖项，比如geolocator和form_builder（如果geoform实际存在，也应添加）。
dependencies:
flutter:
sdk: flutter
geolocator: ^9.0.2 # 请检查最新版本
form_builder: ^7.2.1 # 请检查最新版本
form_builder_validators: ^7.0.0 # 请检查最新版本
- 获取地理位置：
使用
geolocator插件来获取当前位置。
import 'package:geolocator/geolocator.dart';
import 'package:geolocator_platform_interface/geolocator_platform_interface.dart';
Future<Position?> getCurrentLocation() async {
bool serviceEnabled;
LocationPermission permission;
// 检查位置服务是否启用
serviceEnabled = await Geolocator.isLocationServiceEnabled();
if (!serviceEnabled) {
return Future.error('Location services are disabled.');
}
permission = await Geolocator.checkPermission();
if (permission == LocationPermission.denied) {
permission = await Geolocator.requestPermission();
if (permission == LocationPermission.denied) {
return Future.error('Location permissions are denied');
}
}
if (permission == LocationPermission.deniedForever) {
// 处理权限永久拒绝的情况
return Future.error('Location permissions are permanently denied, we cannot request permissions.');
}
// 获取当前位置
Position position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high,
);
return position;
}
- 创建地理表单：
使用
form_builder插件创建一个表单来收集地理位置数据和其他相关信息。
import 'package:flutter/material.dart';
import 'package:form_builder/form_builder.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
class GeoFormScreen extends StatefulWidget {
@override
_GeoFormScreenState createState() => _GeoFormScreenState();
}
class _GeoFormScreenState extends State<GeoFormScreen> {
late GlobalKey<FormBuilderState> _fbKey;
Position? _currentPosition;
@override
void initState() {
super.initState();
_fbKey = GlobalKey<FormBuilderState>();
getCurrentLocation().then((position) {
setState(() {
_currentPosition = position;
});
}).catchError((error) {
print(error);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeoForm'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: FormBuilder(
key: _fbKey,
child: Column(
children: <Widget>[
FormBuilderTextField(
name: 'name',
decoration: InputDecoration(labelText: 'Name'),
validators: [
FormBuilderValidators.required(errorText: 'Name is required'),
],
),
if (_currentPosition != null)
Text(
'Latitude: ${_currentPosition!.latitude}, Longitude: ${_currentPosition!.longitude}',
style: TextStyle(fontSize: 16),
),
FormBuilderSubmitButton(
label: 'Submit',
onPressed: () {
if (_fbKey.currentState!.validate()) {
_fbKey.currentState!.save();
// 处理表单提交
print('Form submitted');
}
},
),
],
),
),
),
);
}
}
在这个示例中，我们首先检查位置服务是否启用，然后请求位置权限，并获取当前位置。然后，我们创建一个包含文本字段和当前位置信息的表单。用户填写表单并提交时，会触发验证和保存操作。
请注意，这个示例假设了一个geoform插件的功能，并使用了geolocator和form_builder插件来实现类似的功能。如果geoform插件实际存在并有不同的API，你需要参考该插件的文档进行调整。
