Flutter 顯示百度地圖 Native 元件

摘要： Flutter 相對還是很新的一門技術，目前來看市場上好像阿里對 Flutter 的關注度最高，相關的技術討論也是最多的。今天看了篇 Flutter 與 Native 混合棧開發的文章，覺得 Flutter 好牛逼，當然這只是個 Flutter 新手的錯覺～ 文章寫的很好，簡單易懂，先放...

Flutter 相對還是很新的一門技術，目前來看市場上好像阿里對 Flutter 的關注度最高，相關的技術討論也是最多的。今天看了篇 Flutter 與 Native 混合棧開發的文章，覺得 Flutter 好牛逼，當然這只是個 Flutter 新手的錯覺～

文章寫的很好，簡單易懂，先放出處： ofollow,noindex">在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

寫一個 PlatformViewFactory ， PlatformViewFactory 的主要任務是，在 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， ViewType 為 MapView 。引數中新增例項化的百度地圖 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 端

簡單實現一個只有地圖的介面，例項化 AndroidView ， viewType 設定為剛剛建立的 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 元件