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

寫一個 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 組件