Android与Flutter混合开发

最近项目中需要在Android原生的应用中添加一些功能，时间紧，任务重，考虑再三，只有Android与Flutter混合才能按时完成。如上图所示，在Android页面中有些按钮需要在Android中跳转，而一些按钮则需跳转至Flutter页面，本文简单梳理一下混合开发流程。

1. 创建flutter module

在Android项目中点击New，然后New Module。然后在弹出的面板中选择Flutter Module，之后输入Flutter module的Project name，选择Flutter SDK所在的路径，选择Flutter module的文件位置，最后输入Flutter module的描述，然后Next，如下图所示

上诉基本信息填充完毕后，点击Next，在弹出的面板中输入Flutter module的包名，如下图所示

输入Package name后点击Finish后Flutter module就正式创建完毕。创建好的flutter module和新建的flutter项目在内容上基本没有差别。

2. 关联Flutter Module

一般来讲，当用户创建好Flutter module后，Android项目中会自动关联创建好的flutter module。是否关联可以在Android项目中settings.gradle中查看。

若开发中是导入flutter module，或想直接使用其他的flutter项目，可手动在settings.gradle中添加

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir,
  '../flutter_module/.android/include_flutter.groovy'
))

其中’…/flutter_module/.android/include_flutter.groovy’是flutter module中include_flutter.groovy的文件路径，由于flutter module所在的位置不一定在Android项目中，只要这个路径写对，flutter module在电脑中任意位置都可以。
同时还需要在使用flutter module的Android module下的build.gradle中dependencies添加

 implementation project(path: ':flutter')

3. Android中跳转Flutter页面

• FlutterActivity直接跳转
  在跳转之前需要先在AndroidManifest.xml注册FlutterActivity。

        <activity
            android:name="io.flutter.embedding.android.FlutterActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:theme="@style/AppTheme"
            android:windowSoftInputMode="adjustResize" >
        </activity>

在需要跳转的时候，使用FlutterActivity.withNewEngine()进行跳转：

   startActivity(FlutterActivity.withNewEngine()
              .initialRoute("params")
              .build(xxxxActivity.this));

其中initialRoute是Android跳转到flutter需要的参数，非必需。
在flutter接收参数如下

   ...
  class _MyHomePageState extends State<MyHomePage> {

  String route = window.defaultRouteName;
  ...
  }

window.defaultRouteName就是获取Android传递过来的参数，当Android端需要跳转多个flutter页面，通常这个用于路由分发，若需要的信息比较多的时候可以传递json字符串。注：window.defaultRouteName的导包为’dart:ui’，而不是’dart:html’。

• FlutterActivity间接跳转
  所谓的间接跳转其实就是通过继承FlutterActivity来实现的

public class Hybrid extends FlutterActivity {

    public final static String PARAMS = "params";
    private String params;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        params = getIntent().getStringExtra(PARAMS);
    }

    @NonNull
    @Override
    public String getInitialRoute() {
        return params == null ? super.getInitialRoute() : params;
    }

    public static void toFlutter(Context context, String params) {
        Intent intent = new Intent(context, Hybrid.class);
        intent.putExtra(PARAMS, params);
        context.startActivity(intent);
    }
    
} 

在AndroidManifest.xm注册Hybrid后就可以通过

Hybrid.toFlutter(xxxxxActivity.this,"params");

进行跳转。

• 通过FlutterEngine和BasicMessageChannel进行跳转
  为什么会有这种方式，是因为使用前两种方式跳转时会有短暂的空白，使用起来感觉非常不流畅，严重影响用户体验。这种跳转方式和上面的两种不同，边跳边发，适用于多种场景。这里也不一定非要使用BasicMessageChannel，也可使用MethodChannel或EventChannel，只是混合开发通常涉及到两端频繁通信，个人更加倾向使用BasicMessageChannel，不分主客，使用和通信更方便。

1. FlutterEngine和BasicMessageChannel的初始化和使用

public class HyBridRouteAndMessageHandleCenter{
    private static FlutterEngine flutterEngine;
    private static BasicMessageChannel basicMessageChannel;
    private static String channelName = "com.hybrid.basic.message.channel";
    public static final String ENGINE_ID = "default_engine_id";
    private static Context mContext;
    private static BasicMessageChannel.Reply mReplay;


    public static void init(Context context) {
        mContext = context;
        if (flutterEngine == null) {
            flutterEngine = new FlutterEngine(context);
            flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());
            FlutterEngineCache.getInstance().put(ENGINE_ID, flutterEngine);
        }

        if (basicMessageChannel == null) {
            if (flutterEngine != null) {
                basicMessageChannel = new BasicMessageChannel<Object>(flutterEngine.getDartExecutor(), channelName, StandardMessageCodec.INSTANCE);
                basicMessageChannel.setMessageHandler(new BasicMessageChannel.MessageHandler() {
                    @Override
                    public void onMessage(@Nullable @org.jetbrains.annotations.Nullable Object message, @NonNull @NotNull BasicMessageChannel.Reply reply) {
                        mReplay = reply;
                        // 接收消息并处理
                        handleMessage(message, reply);
                    }
                });
            }
        }
    }

    // 处理消息
    private static void handleMessage(Object message, BasicMessageChannel.Reply reply) {
		...
    }


    public static void toFlutter(Context context, Object params) {
        sendMessage(params);
        context.startActivity(FlutterActivity.withCachedEngine(ENGINE_ID).build(context));
    }


    public static void sendMessage(Object object) {
        if (basicMessageChannel != null) {
            basicMessageChannel.send(object, new BasicMessageChannel.Reply() {
                @Override
                public void reply(@Nullable @org.jetbrains.annotations.Nullable Object reply) {
                    // 发送回调
                    ...

                }
            });
        }
    }


    public static void destroyEngine() {
        if (flutterEngine != null) {
            flutterEngine.destroy();
        }
    }
}

• 使用FlutterActivity.withCachedEngine(ENGINE_ID).build(context)使因为从缓存中取更快，更省，而且只需要创建一个flutterEngine即可。Android端其实是可以创建多个flutterEngine，只要ENGINE_ID不同，就不是同一个flutterEngine，但是在iOS中只能有一个flutterEngine，使用多个会无效闪退，为了节省资源，避免过多损耗，全局使用一个flutterEngine比较好。
• 关于Flutter向Android发送消息，比如flutter想拍照，拍完照后的图片路径需要传给flutter，照片的路径发送可以使用BasicMessageChannel.Reply回复，也可以使用sendMessage主动再发一次消息。个人认为接收消息并回复消息属于一次通信，所以倾向于使用BasicMessageChannel.Reply。若在Android端有多个页面需要向flutter回复结果，建议使用sendMessage。

2. Flutter收发消息

    static const BasicMessageChannel messageChannel = const BasicMessageChannel(
      "com.hybrid.basic.message.channel", StandardMessageCodec());
    
 	 static Future<dynamic>  sendMessage(Object message) async{
    	dynamic result = await messageChannel.send(message);
   	 	print("**********$result");
  	  	return result;
 	 }
 	 ...
	 messageChannel.setMessageHandler((message) async {
 	 ...
 	}
 	...

• sendMessage即flutter向Android端发送消息。比如拍照，拍完照后Android端通过BasicMessageChannel.Reply将图片路径reply.reply(imageUrl)给flutter，而flutter通过dynamic result = await messageChannel.send(message）接收回复的消息，其中result即为Android端返回imageUrl。
• messageChannel.setMessageHandler是Android主动向flutter发消息，flutter端的消息监听，通过解析message，可以知道Android需要flutter做什么，比如要跳转到什么页面，需要增删改什么数据等等。

4. 效果

5. 总结

1. 若熟练使用Flutter，混合开发可节省至少30%时间。

2. 直接使用FlutterActivity进行跳转，跳转过程中会出现空白间隙，建议使用FlutterEngineCache，效果更好。

3. 创建的Flutter Module不一定非要在Android项目中，可以在任意位置，关联正确就好。

注 ：Android Studio 4.2.1，Android SDK 30 ，Flutter 2.2.0 ， Dart 2.13.0。