Flutter 显示百度地图 Native 组件

Flutter 相对还是很新的一门技术,目前来看市场上好像阿里对 Flutter 的关注度最高,相关的技术讨论也是最多的。今天看了篇 Flutter 与 Native 混合栈开发的文章,觉得 Flutter 好牛逼,当然这只是个 Flutter 新手的错觉~

文章写的很好,简单易懂,先放出处:在Flutter中嵌入Native组件的正确姿势是...,看了文章想亲自动手实践一下。

前提

  1. 已经有了 Flutter 开发环境
  2. 已经注册了百度地图的开发者密钥,并按 教程 导入 SDK
  3. 创建一个 Flutter Application 工程

开始

Flutter 显示 Native 组件最关键的一个类是 AndroidView,它可以嵌入到 Widget 视图里,不过这种操作代价比较大, Flutter 官方文档描述提到尽可能使用 Flutter 的实现方式来避免使用它。

Native 端

初始化百度地图

首先注意下 AndroidManifest.xml 文件 Application 的 name 参数为 io.flutter.app.FlutterApplication,所以如果想在 Application 初始化百度地图 SDK 的话,应当继承它来重写 onCreate 方法

新建一个名为 MainApplication.java 的文件

public class MainApplication extends FlutterApplication {

    @Override
    public void onCreate() {
        super.onCreate();
        // 初始化百度地图 SDK
        SDKInitializer.initialize(this);
        SDKInitializer.setCoordType(CoordType.BD09LL);
    }
}
复制代码

然后将 AndroidManifest.xml 的 application name 参数改为 .MainApplication

添加 PlatformViewFactory

写一个 PlatformViewFactoryPlatformViewFactory 的主要任务是,在 create() 方法中创建一个 View 并把它传给 Flutter

public class BMapViewFactory extends PlatformViewFactory {

    private MapView mapView;

    public BMapViewFactory(MessageCodec<Object> createArgsCodec, MapView mapView) {
        super(createArgsCodec);
        this.mapView = mapView;
    }

    @Override
    public PlatformView create(final Context context, int i, Object o) {
        return new PlatformView() {
            @Override
            public View getView() {
                return mapView;
            }

            @Override
            public void dispose() {

            }
        };
    }
}
复制代码
添加 ViewRegistrant

添加 ViewRegistrant 类将该插件注册到 APP,ViewTypeMapView。参数中新增实例化的百度地图 MapView。

public final class ViewRegistrant {
    public static void registerWith(PluginRegistry registry, MapView mapView) {
        final String key = ViewRegistrant.class.getCanonicalName();

        if (registry.hasPlugin(key)) return;

        PluginRegistry.Registrar registrar = registry.registrarFor(key);
        registrar.platformViewRegistry().registerViewFactory("MapView", new BMapViewFactory(new StandardMessageCodec(), mapView));
    }
}
复制代码
注册 PlatformViewFactory

MainActivity 中实例化地图并且注册以上添加的 ViewRegistrant 类。

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    MapView mapView = new MapView(this);
    ViewRegistrant.registerWith(this, mapView);
  }
}
复制代码

Flutter 端

简单实现一个只有地图的界面,实例化 AndroidViewviewType 设置为刚刚创建的 MapView,将百度地图显示。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: AppBar(title: Text("Map"),),
        body: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(child: new AndroidView(viewType: 'MapView'))
          ],
        ),
      ),
    );
  }
}
复制代码

编译

如此,地图正常显示了。

我的博客:时空路由器 文章原地:Flutter 显示百度地图 Native 组件

转载于:https://juejin.im/post/5bf101cd6fb9a049a62c2a26

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值