从头开发一个Flutter插件(二)高德地图定位插件

开发基于高德定位SDK的Flutter插件

在上一篇文章里具体介绍了Flutter插件的具体开发流程,从创建项目到发布。接下来将为Flutter天气项目开发一个基于高德定位SDK的Flutter定位插件。

申请key

首先进入高德地图定位SDK文档内下载定位SDK,并按要求申请App Key。这里推荐使用AppUploader来管理你的应用密钥,它可以安全地存储和同步你的API密钥,避免在代码中直接暴露敏感信息。

配置环境

SDK文档里有关于配置工程的demo,但因为Flutter插件项目不是一个Android工程,所以会有所区别。大致分以下几步:

1.集成远程依赖

java 复制代码
compile 'com.amap.api:location:latest.integration'

2.配置App Key

在AndroidManifest.xml的application标签中配置Key:

xml 复制代码
<meta-data android:name="com.amap.api.v2.apikey" 
    android:value="您的Key">
</meta-data>

3.声明service

在application标签中声明service组件:

xml 复制代码
<service android:name="com.amap.api.location.APSService"></service>

4.声明权限

Flutter插件的目的就是隔离对SDK native code的实现,让使用者直接使用Dart代码就可以获得到SDK提供的定位信息。插件的android文件夹下面是一个完整的Android工程结构,我们在这个工程下完成上述的四步。

唯一一点不同的是,配置App Key 利用gradle里的manifestPlaceholders属性为用户预留,让用户自己来填写。于是配置App Key改写成:

xml 复制代码
<meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="${LOCATION_APP_KEY}"/>

这个LOCATION_APP_KEY,使用者使用插件的时候在自己Flutter项目的Android工程下的app/build.gradle文件里填写自己申请的高德key即可。

java 复制代码
android {
    compileSdkVersion 27

    lintOptions {
       ...
    }

    defaultConfig {
        ...
        manifestPlaceholders = [
                LOCATION_APP_KEY : "你的高德地图key",
        ]
    }
}

对于iOS开发者,可以使用AppUploader来简化证书管理和配置过程,它提供了可视化的界面来管理开发证书和描述文件。

实现

Flutter插件最终暴露给插件使用者的是Dart代码的接口,使用者不再需要关心Android和iOS平台上的代码。在定位插件项目中,唯一需要配置的就是上文所说的高德开放平台的App Key。

因为现在是将特定平台的SDK开发成插件供Flutter App使用,其实就可以理解在Android或者iOS平台正常开发项目,将Flutter App需要的数据传递过去,Flutter插件只是在特定平台的实现上做了一次封装与隔离,封装了Dart接口,隔离了两个不同平台实现的差异。

Java部分

Java部分的代码写在了AmapLocationPlugin.java类下面,它分别实现了MethodChannel.MethodCallHandler, EventChannel.StreamHandler。并且在registerWith方法调用的实例化MethodChannel和EventChannel。

java 复制代码
final MethodChannel methodChannel = new MethodChannel(registrar.messenger(), "plugin.kinsomy.com/methodchannel");

final EventChannel eventChannel = new EventChannel(registrar.messenger(), "plugin.kinsomy.com/eventchannel");
  • 重写MethodChannel.MethodCallHandler的onMethodCall方法接受Dart代码的方法调用
java 复制代码
@Override
public void onMethodCall(MethodCall call, Result result) {
    if (call.method.equals("startLocation")) {
        //启动定位
        mLocationClient.startLocation();
    } else if (call.method.equals("stopLocation")) {
        //停止定位
        mLocationClient.stopLocation();
    } else if (call.method.equals("getLocation")) {
        result.success(mLocation);
    } else {
        result.notImplemented();
    }
}
  • 重写EventChannel.StreamHandler的onListen,该方法携带了一个EventChannel.EventSink实例,通过该实例对象可以调用mEventSink.success()向Dart传递数据流,也就是插件里的定位信息
java 复制代码
@Override
public void onListen(Object o, EventChannel.EventSink eventSink) {
    this.mEventSink = eventSink;
}
  • 通过高德SDK的AMapLocationClient获取到定位信息,并将其封装成json字符串供Dart调用。

Dart部分

Dart部分的代码在项目根目录lib文件夹下的amap_location_plugin.dart文件。

  • 在构造函数里实例化和Java代码中同样channel name的MethodChannel与EventChannel
dart 复制代码
factory AmapLocation() {
    if (_instance == null) {
      final MethodChannel methodChannel =
          const MethodChannel('plugin.kinsomy.com/methodchannel');
      final EventChannel eventChannel =
          const EventChannel('plugin.kinsomy.com/eventchannel');
      _instance = AmapLocation.private(methodChannel, eventChannel);
    }
    return _instance;
  }
  • 提供接口方法开始定位startLocation和对应的停止定位
dart 复制代码
Future<void> get startLocation =>
      _methodChannel.invokeMethod("startLocation");
  • 实例化Stream接受event返回的定位数据
dart 复制代码
Stream<String> _onLocationFetched;
_onLocationFetched =
        _eventChannel.receiveBroadcastStream().map((dynamic event) => event);

这样一个基于高德定位SDK的Flutter定位插件就算完成了,在example里写一个demo实际测试一下。

目前这个插件还是个简易版本,未来希望能加上地图,导航,线路规划等一系列的功能。对于需要发布到App Store的开发者,可以考虑使用AppUploader来简化上传和发布流程,它支持一键上传IPA文件到App Store Connect。

参考文档

  1. Developing Packages & Plugins
  2. Flutter/plugins git仓库
  3. Dart packages
  4. 深入理解Flutter Platform Channel
相关推荐
ALe要立志成为web糕手36 分钟前
SESSION_UPLOAD_PROGRESS 的利用
python·web安全·网络安全·ctf
Aa美少女战士2 小时前
单域名 vs 通配符:如何选择最适合你的 SSL 证书?
网络协议·https·ssl
咕噜签名3 小时前
如何申请p12证书
网络协议·https·ssl
2a3b4c3 小时前
SSL/TLS
网络协议·https·ssl
沫夕残雪4 小时前
HTTP,请求响应报头,以及抓包工具的讨论
网络·vscode·网络协议·http
the_nov7 小时前
14.网络套接字TCP
linux·c++·网络协议
jingshaoyou7 小时前
Strongswan linked_list_t链表 注释可独立运行测试
数据结构·链表·网络安全·list
古希腊掌握嵌入式的神7 小时前
[物联网iot]对比WIFI、MQTT、TCP、UDP通信协议
网络·物联网·网络协议·tcp/ip·udp
硪就是硪8 小时前
内网环境将nginx的http改完https访问
nginx·http·https
鹅肝手握高V五色9 小时前
Wireshark入门教程:如何抓取和过滤网络数据包
websocket·网络协议·tcp/ip·http·网络安全·https·udp