Flutter开发者，需要会原生吗？-- Android 篇

前言：随着Flutter在国内移动应用的成熟度，大部分企业都开始认可Flutter的可持续发展，逐步引入Flutter技术栈。

由此关于开发人员的技能储备问题，会产生一定的疑问。今天笔者将从我们在OS中应用Flutter的各种玩法，聊聊老生常谈的话题：Flutter开发者到底需不需要懂原生平台？

缘起

《Flutter开发者需要掌握原生Android吗？》

这个话题跟Flutter与RN对比、Flutter会不会凉同属一类，都是前两年社群最喜欢争论的话题。激烈的讨论无非是观望者太多，加之Flutter不成熟，在使用过程中会遇到不少坑。

直到今年3.7.0、3.10.0相继发布，框架改进和社区的丰富，让更多人选择拥抱Flutter，关于此类型的话题才开始沉寂下来。很多招聘网站也直接出现了Flutter开发这个岗位，而且技能也不要求原生，甚至加分项前端的技能。似乎Flutter开发者在开发过程中很少用到原生的技能，然而事实绝非如此。

我专攻Flutter有3年了，期间Android、iOS、Windows应用做过不少，Web、Linux也都略有研究；这次我将直接从Android平台出发，用切身经历来论述下：Flutter开发者，真的需要懂Android。

Flutter只是个UI框架

打开一个Flutter的项目，我们可以看到整个应用其实是基于一个Activity运行的，属于单页应用。

package com.wxq.test

import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {

}

Activity继承自FlutterActivity，FlutterActivityonCreate内会创建FlutterActivityAndFragmentDelegate

// io/flutter/embedding/android/FlutterActivity.java
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {

  switchLaunchThemeForNormalTheme();

super.onCreate(savedInstanceState);
// 创建代理，ActivityAndFragment都支持哦

  delegate = new FlutterActivityAndFragmentDelegate(this);

  delegate.onAttach(this); // 这个方法创建引擎，并且将context吸附上去

  delegate.onRestoreInstanceState(savedInstanceState);


  lifecycle.handleLifecycleEvent(Lifecycle.Event.ON_CREATE);


  configureWindowForTransparency();

// 设置Activity的View，createFlutterView内部也是调用代理的方法

  setContentView(createFlutterView()); 

  configureStatusBarForFullscreenFlutterExperience();

}

这个代理将会通过engineGr0up管理FlutterEngine，通过onAttach创建FlutterEngine，并且运行createAndRunEngine方法

// io/flutter/embedding/android/FlutterActivityAndFragmentDelegate.java
void onAttach(@NonNull Context context) {

  ensureAlive();

if (flutterEngine == null) {

    setupFlutterEngine();

  }

if (host.shouldAttachEngineToActivity()) {


    Log.v(TAG, "Attaching FlutterEngine to the Activity that owns this delegate.");

    flutterEngine.getActivityControlSurface().attachToActivity(this, host.getLifecycle());

  }

  platformPlugin = host.providePlatformPlugin(host.getActivity(), flutterEngine);


  host.configureFlutterEngine(flutterEngine);

  isAttached = true;

}

@VisibleForTesting
/* package */ void setupFlutterEngine() {

  Log.v(TAG, "Setting up FlutterEngine.");

// 省略处理引擎缓存的代码
String cachedEngineGr0upId = host.getCachedEngineGr0upId();
if (cachedEngineGr0upId != null) {
FlutterEngineGr0up flutterEngineGr0up =

        FlutterEngineGr0upCache.getInstance().get(cachedEngineGr0upId);
if (flutterEngineGr0up == null) {
throw new IllegalStateException(
"The requested cached FlutterEngineGr0up did not exist in the FlutterEngineGr0upCache: '"

              + cachedEngineGr0upId

              + "'");

    }

// *** 重点 ***

    flutterEngine =

        flutterEngineGr0up.createAndRunEngine(

            addEntrypointOptions(new FlutterEngineGr0up.Options(host.getContext())));

    isFlutterEngineFromHost = false;
return;

  }

// Our host did not provide a custom FlutterEngine. Create a FlutterEngine to back our
// FlutterView.

  Log.v(

      TAG,
"No preferred FlutterEngine was provided. Creating a new FlutterEngine for"

          + " this FlutterFragment.");

FlutterEngineGr0up group =

      engineGr0up == null

          ? new FlutterEngineGr0up(host.getContext(), host.getFlutterShellArgs().toArray())

          : engineGr0up;

  flutterEngine =

      group.createAndRunEngine(

          addEntrypointOptions(
new FlutterEngineGr0up.Options(host.getContext())

                  .setAutomaticallyRegisterPlugins(false)

                  .setWaitForRestorationData(host.shouldRestoreAndSaveState())));

  isFlutterEngineFromHost = false;

}

再调用onCreateView创建SurfaceView或者外接纹理TextureView，这个View就是Flutter的赖以绘制的画布。

// io/flutter/embedding/android/FlutterActivityAndFragmentDelegate.java
@NonNull

View onCreateView(

    LayoutInflater inflater,
@Nullable ViewGr0up container,
@Nullable Bundle savedInstanceState,
int flutterViewId,
boolean shouldDelayFirstAndroidViewDraw) {

  Log.v(TAG, "Creating FlutterView.");

  ensureAlive();

if (host.getRenderMode() == RenderMode.surface) {
FlutterSurfaceView flutterSurfaceView =
new FlutterSurfaceView(

            host.getContext(), host.getTransparencyMode() == TransparencyMode.transparent);

// Allow our host to customize FlutterSurfaceView, if desired.

    host.onFlutterSurfaceViewCreated(flutterSurfaceView);

// Create the FlutterView that owns the FlutterSurfaceView.

    flutterView = new FlutterView(host.getContext(), flutterSurfaceView);

  } else {
FlutterTextureView flutterTextureView = new FlutterTextureView(host.getContext());


    flutterTextureView.setOpaque(host.getTransparencyMode() == TransparencyMode.opaque);

// Allow our host to customize FlutterSurfaceView, if desired.

    host.onFlutterTextureViewCreated(flutterTextureView);

// Create the FlutterView that owns the FlutterTextureView.

    flutterView = new FlutterView(host.getContext(), flutterTextureView);

  }


  flutterView.addOnFirstFrameRenderedListener(flutterUiDisplayListener);
// 忽略一些代码...
return flutterView;

}

由此可见，Flutter的引擎实际上是运行在Android提供的View上，这个View必然是设置在Android的组件上，可以是Activity、Framgent，也可以是WindowManager。

这就给我们带来了很大的可塑性，只要你能掌握这套原理，混合开发就随便玩了。

Android，是必须的能力

通过对Flutter运行机制的剖析，我们很明确它就是个单纯的UI框架，惊艳的跨端UI都离不开Android的能力，这也说明Flutter开发者不需要会原生注定走不远。

下面几个例子，也可以充分论证这个观点。

一、Flutter插件从哪里来

上面讲述到的原理，Flutter项目脚手架已经帮我们做好，但这只是UI绘制层面的；实际上很多Flutter应用，业务能力都是由Pub.dev提供的，随着社区框架的增多，开发者大多时候是感知不到需要Android能力的。

然而业务的发展是迅速的，我们开始需要很多pub社区并不支持的能力，比如：getMetaData、getMacAddress、reboot/shutdown、sendBroadcast等，这些能力都需要我们使用Android知识，以编写插件的形式，提供给Flutter调用。

Flutter Plugin在Dart层和Android层都实现了MethodChannel对象，同一个Engine下，只要传入一致的channelId字符串，就能建立双向的通道互相传输基本类型数据。

class FlutterNativeAbilityPlugin : FlutterPlugin, MethodCallHandler {
private var applicationContext: Context? = null

private lateinit var channel: MethodChannel

override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {

        applicationContext = flutterPluginBinding.applicationContext

        channel = MethodChannel(flutterPluginBinding.binaryMessenger, "flutter_native_ability")

        channel.setMethodCallHandler(this)

    }

class MethodChannelFlutterNativeAbility extends FlutterNativeAbilityPlatform {
/// The method channel used to interact with the native platform.
@visibleForTesting
final methodChannel = const MethodChannel('flutter_native_ability');

}

发送端通过invokeMethod调用对应的methodName，传入arguments；接收端通过实现onMethodCall方法，接收发送端的invokeMethod操作，执行需要的操作后，通过Result对象返回结果。

@override

Future<String> getMacAddress() async {
final res = await methodChannel.invokeMethod<String>('getMacAddress');
return res ?? '';

}

@override

Future<void> reboot() async {
await methodChannel.invokeMethod<String>('reboot');

}

"getMacAddress" -> {

    Log.i(TAG, "onMethodCall: getMacAddress")
val macAddress = CommonUtils().getDeviceMac(applicationContext)

    result.success(macAddress)

}
"reboot" -> {

    Log.i(TAG, "onMethodCall: reboot")

    beginToReboot(applicationContext)

    result.success(null)

}

ps：invokeMethod和onMethodCall双端都能实现，都能作为发送端和接收端。

二、Flutter依赖于Android机制，得以“横行霸道”

目前我们将Flutter应用于OS的开发，这需要我们不单是从某个独立应用去思考。很多应用、服务都需要从整个系统业务去设计，在以下这些需求中，我们深切感受到：Flutter跟Android配合后，能发挥更大的业务价值。

• 
  
• Android服务运行dart代码，广播接收器与Flutter通信
  

我们很多服务需要开机自启，这必须遵循Android的机制。通常做法是：接收开机广播，在广播接收器中启动Service，然后再去运行DartEngie，执行跨平台的代码；

class MyTestService : Service() {

private lateinit var engineGr0up: FlutterEngineGr0up

override fun onCreate() {
super.onCreate()

        startForeground()


        engineGr0up = FlutterEngineGr0up(this)
// initService是Flutter层的方法入口点
val dartEntrypoint = DartExecutor.DartEntrypoint(

            FlutterInjector.instance().flutterLoader().findAppBundlePath(),
"initService"

        )
val flutterEngine = engineGr0up.createAndRunEngine(this, dartEntrypoint)
// Flutter调用Native方法的 MethodChannel 也初始化一下，调用安装接口需要

        FlutterToNativeChannel(flutterEngine, this)

    }

}

同时各应用之间需要通信，这时我们也会通过Broadcat广播机制，在Android的广播接收器中，通过MechodChannel发送给Flutter端。

总而言之，我们必须 遵循系统的组件规则，基于Flutter提供的通信方式，将Android的消息、事件等发回给Flutter， 带来的跨端效益是实实在在的！

• 
  
• 悬浮窗需求
  

悬浮窗口在视频/直播场景下用的最多，当你的应用需要开启悬浮窗的时候，Flutter将完全无法支持这个需求。

实际上我们只需要在Android中创建一个WindowManager，基于EngineGround创建一个DartEngine；然后创建flutterView，把DartEngine吸附到flutterView上，最后把flutterView Add to WindowManager即可。

private lateinit var flutterView: FlutterView
private var windowManager = context.getSystemService(Service.WINDOW_SERVICE) as WindowManager
private val inflater =

    context.getSystemService(Service.LAYOUT_INFLATER_SERVICE) as LayoutInflater
private val metrics = DisplayMetrics()

@SuppressLint("InflateParams")
private var rootView = inflater.inflate(R.layout.floating, null, false) as ViewGr0up

windowManager.defaultDisplay.getMetrics(metrics)

layoutParams.gravity = Gravity.START or Gravity.TOP


windowManager.addView(rootView, layoutParams)


flutterView = FlutterView(inflater.context, FlutterSurfaceView(inflater.context, true))

flutterView.attachToFlutterEngine(engine)


engine.lifecycleChannel.appIsResumed()


rootView.findViewById<FrameLayout>(R.id.floating_window)

    .addView(

        flutterView,

        ViewGr0up.LayoutParams(

            ViewGr0up.LayoutParams.MATCH_PARENT,

            ViewGr0up.LayoutParams.MATCH_PARENT

        )

    )

windowManager.updateViewLayout(rootView, layoutParams)

• 
  
• 不再局限单页应用
  

最近我们在升级应用中，遇到一个比较尴尬的需求：在原有OTA功能下，新增一个U盘插入本地升级的功能，希望升级能力和UI都能复用，且互不影响各自流程。

如果是Android项目很简单，把升级的能力抽象，通过多个Activity管理自己的业务流程，互不干扰。但是Flutter项目属于单页应用，不可能同时展示两个路由页面各自处理，所以也必须 走Android的机制，让Flutter应用同时运行多个Activity。

我们在Android端监听了U盘的插入事件，在需要本地升级的时候直接弹出Activity。Activity是继承FlutterActivity的，通过<metadata>标签指定方法入口点。与MainActivity运行main区分开，然后通过重写getDartEntrypointArgs方法，把必要的参数传给Flutter入口函数，从而独立运行本地升级的业务，而且UI和能力都能复用。

class LocalUpgradeActivity : FlutterActivity() {

}

<activity
android:name=".LocalUpgradeActivity"
android:exported="true"
android:hardwareAccelerated="true"
android:launchMode="singleTop"
android:theme="@style/Theme.Transparent"
android:windowSoftInputMode="adjustResize">
<meta-data
android:name="io.flutter.Entrypoint"
android:value="runLocalUpgradeApp" /> <!-- 这里指定Dart层的入口点-->
</activity>

override fun getDartEntrypointArgs(): MutableList<String?> {
val filePath: String? = intent?.getStringExtra("filePath")
val tag: String? = intent?.getStringExtra("tag")
return mutableListOf(filePath, tag)

}

至此，我们的Flutter应用不再是单页应用，而且所有逻辑和UI都将在Flutter层实现！

总结

我们遵循Android平台的机制，把逻辑和UI都尽可能的交给Flutter层，让其在跨平台上发挥更大的可能性，在落地过程确实切身体会到Android的知识是何等的重要！

当然我们的应用场景可能相对复杂，一般应用也许不会有这么多的应用组合；但无论Flutter如何完善，社区更加壮大，它都离不开底层平台的支持。

作为Flutter开发者，有精力的情况下，一定要多学各个平台的框架和能力，让Flutter、更让自己走的更远！