前言：作为一名大前端开发者，我的技术栈其实一直都很混乱，从Flutter到小程序再到Vue，我都做过不少项目。原因可能是我一直以来都想做大前端的念想，加上以往公司业务方向，让我对所有前端技术来着不拒。
但是总有一门技术需要钻精，于是我果断选择了Flutter，这半年来也一直在做Flutter的项目；但想要成为Flutter高级开发者，不会原生岂能说的过去，而我的前端刚好也是大学选修Android而入门的；所以我决定开始学习并记录Flutter与Android混合开发系列文章。与君共勉~
一、Flutter与Android混合开发的类别
先做下总结，整个系列包括：Flutter package（Flutter纯Dart库）、Flutter Plugin（Flutter原生插件库）、Android混入Flutter模块。
以下再做细分：
package是纯dart代码的库，供Flutter引用；
Plugin是原生插件库，是一种特殊的package，Plugin涉及这几个方面：Flutter与原生间相互的数据通信、
Flutter显示Android 视图、
Flutter跳转到Android Activity、Android Fragment。Android混入Flutter模块：通过引入Flutter Module，分别在Android端的Activity和Fragment中显示Flutter视图。
二、Flutter Plugin开发详解
Plugin即原生插件，开发者需要编写android、iOS双端的代码，然后由Flutter层直接调用。由于笔者只学Android，所以iOS端的功能我能省都会省了。另外，在编写Flutter插件时，官方已经启用Flutter Engine来管理插件，因此写法与网上的旧资料也会有所不同。
这篇文章我将实现：Flutter显示Android view！
下一篇文章再记录：1. Flutter与Android的通信（包括MethodChannel、BasicMessageChannel、EventChannel）2. Flutter跳转到原生Activity、Fragment；
1、 Flutter Plugin的创建
若是使用Android studio开发工具的开发者，可以在菜单栏中直接创建一个plugin项目，根据提示一步步选择即可；
当然我建议你用命令行创建项目（其中-a指定android的开发语言，-i指定ios的开发语言）：
flutter create --org com.example --template=plugin --platforms=android,ios -a java -i swift hello
2. Flutter显示Android View
-
打开android studio模块，以便更快捷的编写代码；
-
可以看到有两个android module，其中我们要编写的是插件的模块；module目录结构
- 我们需要创建一个原生视图布局，在包名下面创建一个新的视图，这里我只是简单构建了一个Text控件，这部分属于原生的能力，笔者也不太熟悉。
package com.karl.wei.my_camera;
import android.content.Context;
import android.view.View;
import android.widget.TextView;
import java.util.Map;
import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.platform.PlatformView;
public class MyInfoView implements PlatformView {
private final TextView name;
public MyInfoView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params){
TextView textView = new TextView(context);
textView.setText("正在加载...");
this.name = textView;
if(params!=null&¶ms.containsKey("content")){
String t = (String)params.get("content");
textView.setText(t);
}
}
@Override
public View getView() {
return name;
}
@Override
public void dispose() {
}
}
- 之后需要构建一个视图工厂的类，提供给Engine进行视图的注册，其中create生命周期需要retrun对应的视图文件。
import android.content.Context;
import com.karl.wei.my_camera.MyInfoView;
import java.util.Map;
import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.StandardMessageCodec;
import io.flutter.plugin.platform.PlatformView;
import io.flutter.plugin.platform.PlatformViewFactory;
public class MyViewFactory extends PlatformViewFactory {
private final BinaryMessenger messenger;
public MyViewFactory(BinaryMessenger messenger) {
super(StandardMessageCodec.INSTANCE);
this.messenger = messenger;
}
@Override
@SuppressWarnings("unchecked")
public PlatformView create(Context context, int id, Object o) {
Map<String, Object> params = (Map<String, Object>) o;
return new MyInfoView(context, messenger, id, params);
}
}
- 然后需要在插件的类中，注册我们要返回的视图，注册时需要传入唯一标识和视图工厂，每一个标识对应一个视图工厂。
@Override
public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
// 需要注册的视图的唯一标识
final String key = "karl_info";
// 创建MethodChannel通道，my_camera与yaml的name是需要对应的
channel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), "my_camera");
channel.setMethodCallHandler(this);
// 注册原生view，通过注册视图工厂（ViewFactory），需要传入唯一标识和ViewFactory类
flutterPluginBinding.getPlatformViewRegistry().registerViewFactory(key, new MyViewFactory(flutterPluginBinding.getBinaryMessenger()));
}
- 到这里，原生视图算是简单编写完成；接下来还需要Flutter将我们再原生的视图给暴露出去，让纯Flutter项目可以简单的接入我们的视图。回到plugin目录下，我们新建一个dart文件，通过Flutter提供的AndroidView返回我们的原生布局，AndroidView接收一个viewType参数，这个参数就是试图的唯一标识，跟第5点相对应。
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class InfoWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
String viewType = 'karl_info'; // 唯一标识符
var creationParams = {
'type': 'info_view',
}; // 视图创建参数，可以被插件用来传递构造函数参数到嵌入式Android视图
// 视图创建完毕的回调
PlatformViewCreatedCallback callback = (id) {
print(id);
};
// 判断设备类型，也可用：defaultTargetPlatform == TargetPlatform.android
if (Platform.isAndroid) {
return AndroidView(
viewType: viewType,
onPlatformViewCreated: callback,
);
} else if (Platform.isIOS) {
return UiKitView(
viewType: viewType,
onPlatformViewCreated: callback,
);
} else {
return Text('Platform is not yet supported by this plugin');
}
}
}
- 现在，Flutter端如何使用我们的视图？如果由于某些问题，你的插件只能本地引用的时候，首先在yaml配置文件中引入插件，然后在项目的android中主文件注册插件。
dependencies:
flutter:
sdk: flutter
my_camera:
path: ../
package io.flutter.plugins;
import androidx.annotation.Keep;
import androidx.annotation.NonNull;
import io.flutter.embedding.engine.FlutterEngine;
/**
* Generated file. Do not edit.
* This file is generated by the Flutter tool based on the
* plugins that support the Android platform.
*/
@Keep
public final class GeneratedPluginRegistrant {
public static void registerWith(@NonNull FlutterEngine flutterEngine) {
flutterEngine.getPlugins().add(new com.karl.wei.my_camera.MyCameraPlugin());
}
}
如果你开发过flutter项目，到这里你应该会疑惑，以前项目引入那么多的开源插件，都不需要手动注册插件呀，怎么到这里就需要了？其实，当我们执行flutter pub get时，编译器就自动为我们加入相应插件的注册了，不信你看看看这个文件，嘿嘿！
- 然后在你的项目中，需要的地方引用即可
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Container(
child: Center(
child: InfoWidget(),
),
),
),
);
}
三、总结
梳理下Flutter Plugin显示Android View的逻辑：
① 创建完插件后，在原生层新建一个文件继承自PlatformView，编写视图内容；
② PlatformViewFactory创建一个视图工厂继承自PlatformViewFactory，其中create生命周期返回对应的视图文件；
③ 在插件主文件中注册视图，并定义好唯一标识；
④ 在Flutter层使用AndroidView通过传入③中定义好的标识，通过视图工厂取出视图；
⑤ Flutter使用者调用即可。
另外，原生视图同样可以传递参数，跟view的层层传递是一起完成的。如AndroidView中是传递creationParams，PlatformViewFactory在create中接收并传递给真正的PlatformView，这里不做拓展。
四、写在最后
其实Flutter显示原生View笔者认为没有太大意义，因为Flutter本身就是一个非常完美的UI框架，既然选择使用Flutter，其实用到原生视图的地方就比较少了。重点将在后续章节：Flutter与原生通信、Flutter调整Activity等功能的学习。
这篇文章仅仅是系列的开端，笔者也是边学边记录，希望能帮到大家，一起学习一起努力。
希望大家多多指导我！
