• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Android与Flutter混合开发

互联网 diligentman 1天前 3次浏览

Android与Flutter混合开发

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

1. 创建flutter module

Android与Flutter混合开发
在Android项目中点击New,然后New Module。然后在弹出的面板中选择Flutter Module,之后输入Flutter module的Project name,选择Flutter SDK所在的路径,选择Flutter module的文件位置,最后输入Flutter module的描述,然后Next,如下图所示
Android与Flutter混合开发
上诉基本信息填充完毕后,点击Next,在弹出的面板中输入Flutter module的包名,如下图所示
Android与Flutter混合开发
输入Package name后点击Finish后Flutter module就正式创建完毕。创建好的flutter module和新建的flutter项目在内容上基本没有差别。

2. 关联Flutter Module

一般来讲,当用户创建好Flutter module后,Android项目中会自动关联创建好的flutter module。是否关联可以在Android项目中settings.gradle中查看。
Android与Flutter混合开发
若开发中是导入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。
  1. 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. 效果

Android与Flutter混合开发

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。


程序员灯塔
转载请注明原文链接:Android与Flutter混合开发
喜欢 (0)