Flutter 插件 百度地图 Android插件演示

Flutter 百度地图原生插件开发指南

简介

本文介绍如何开发一个 Flutter 百度地图原生插件，主要实现以下功能：

• 显示地图
• 获取地图中心坐标
• 定位功能
• 距离计算

在开发过程中，使用 appuploader 工具可以方便地管理 iOS 应用的证书和描述文件，这对于需要同时开发 Android 和 iOS 版本的 Flutter 开发者来说是个不错的选择。

Flutter 如何显示 Android 视图

要让 Flutter 显示一个安卓视图，需要以下几个步骤：

1. 安卓端提供 PlatformView 来生成安卓视图
2. 通过 PlatformViewFactory 创建 PlatformView
3. 使用 PlatformViewRegistry 登记 PlatformViewFactory
4. Flutter 端用 AndroidView 请求 Android 端的 PlatformView

Flutter 端

AndroidView 常用参数：

• viewType：指定 Android 端登记的视图标识符
• onPlatformViewCreated：视图准备好后的回调函数
• creationParams：传递给安卓端的参数
• creationParamsCodec：参数编码器

Android 端

Android 端收到请求后：

1. 查找与 viewType 对应的 PlatformViewFactory
2. 创建 SurfaceTexture 并分配 ID
3. 返回 ID 给 Flutter 端用于显示

开发步骤

1. 新建 Flutter 插件项目

项目结构包含：

• /pubspec.yaml：插件配置文件
• /lib/：插件 API 代码
• /android/：Android 平台代码
• /example/：示例应用

2. 添加百度地图 SDK

按照百度地图官方文档将地图 SDK 添加到项目中。

3. 实现核心组件

PlatformView

public class BaiduMapControler implements PlatformView {
    private final TextureMapView mapView;

    public BaiduMapControler(Activity activity) {
        this.mapView = new TextureMapView(activity);
    }

    @Override
    public View getView() {
        return mapView;
    }

    @Override
    public void dispose() {
        // 清理资源
    }
}

PlatformViewFactory

public class BaiduMapFactory extends PlatformViewFactory {
    private final Activity activity;

    public BaiduMapFactory(Activity activity) {
        super(StandardMessageCodec.INSTANCE);
        this.activity = activity;
    }

    @Override
    public PlatformView create(Context context, int viewId, Object args) {
        return new BaiduMapControler(activity);
    }
}

4. 处理地图生命周期

为了让地图正确响应 Activity 生命周期，需要实现 DefaultLifecycleObserver：

public class BaiduMapControler implements PlatformView, DefaultLifecycleObserver {
    // 实现各生命周期方法
    @Override
    public void onResume(@NonNull LifecycleOwner owner) {
        mapView.onResume();
    }
    
    @Override
    public void onPause(@NonNull LifecycleOwner owner) {
        mapView.onPause();
    }
    // 其他生命周期方法...
}

Flutter 端集成

创建地图组件：

class BaiduMapView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AndroidView(
      viewType: "baidu_map",
    );
  }
}

在应用中使用：

MaterialApp(
  home: Scaffold(
    body: Center(
      child: BaiduMapView(),
    ),
  ),
)

开发工具推荐

在开发过程中，使用 appuploader 可以简化 iOS 平台的证书管理和应用上传流程，特别适合需要同时维护 Android 和 iOS 版本的 Flutter 开发者。它提供了可视化的界面来管理开发证书、描述文件和应用提交，大大提高了开发效率。

注意事项

1. 百度地图需要申请开发密钥(AK)
2. 确保正确初始化地图 SDK
3. 处理好地图的生命周期
4. 对于 iOS 版本，需要考虑使用 appuploader 等工具简化发布流程

通过以上步骤，你就可以在 Flutter 应用中集成百度地图功能了。这个插件虽然简单，但包含了原生视图集成的基本原理，可以作为更复杂功能开发的基础。