欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter 混合开发FlutterBoost Android 接入流程

程序员文章站 2022-07-13 17:08:51
...

最近公司开始推行使用Flutter用于移动端开发,忙活了一个多月的Flutter混合开发迭代端午节后准备上线,写下此过程的坑以及一些接入流程,以及Flutter技术。

由于我主业是搞Android开发的,iOS还是个菜鸟,先介绍一下Android混合接入流程

1.创建Flutter module

很多情况下,Flutter的接入都是在原有的移动端项目的基础上接入,这样相对于侵入原有项目弱,并且接入的成本低,风险也低。

flutter create -t module flutter_module

在命令行界面录入即可,最好是和原本的项目在相同的目录下,同级文件夹。我的项目基本是原有项目是一个git仓库,对应的Flutter代码是在另一个git仓库,这样版本管理也是比较好的

2.Android 开始接入

在原有setting.gradle文件末尾的添加一下代码

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

这样就会引入到对应的Flutter的module资源,对应的编译脚本,Flutter框架已经写好,后续有时间可以读读

在app目录下的build.gradle文件中添加Flutter依赖

implementation project(':flutter')

主要的依赖链如下

flutter_module/.android/include_flutter.groovy ->
flutter_module/.android/Flutter/build.gradle ->
$flutterRoot/packages/flutter_tools/gradle/flutter.gradle 

很方便的完成混合开发的打包操作,接入完之后最好在flutter项目下面的.android文件下,用命令行工具执行以下

gradlew assembleDebug

命令完成对应的Android依赖加载

3.原生显示Flutter的视图

Button open = findViewById(R.id.openBtn);
open.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent = new Intent();
        intent.setClass(MainActivity.this, MyFlutterActivity.class);
        startActivity(intent);
    }
});

public class MyFlutterActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);
        final FlutterView flutterView = Flutter.createView(
                this,
                getLifecycle(),
                "route1"
        );
        final FrameLayout layout = findViewById(R.id.flutter_container);
        layout.addView(flutterView);
    
    }
}

只需要在Activity中的addView即可,看起来很简单,不过存在很多问题,跳转过程可能会有黑屏情况,以及Flutter视图的复用也是个问题,以及对应的Flutter 跳转Native界面也是个问题。于是乎谷歌发现FlutterBoost框架解决了大部分以上的问题。

4.FlutterBoost框架的接入

依照https://github.com/alibaba/flutter_boost官方的文档,接入发现有很多的坑,不知道是不是开发人员都反感写文档一样的。

接入的流程如下:

4.1 Flutter项目接入FlutterBoost

在对应的pubspec.yaml文件中加入依赖,pubspec.yaml就是一个配置文件。

flutter_boost:
        git:
            url: 'https://github.com/alibaba/flutter_boost.git'
            ref: '0.0.411'

之后调用Package get,右上角即可查看,之后还是在.android 文件下执行
gradlew assembleDebug,完成依赖下载。

4.2 Flutter中main.dart文件中配置

 @override
  void initState() {
    super.initState();
    FlutterBoost.singleton.registerPageBuilders({
        //对应的Page的名字,最好是类Http格式
      'demoPage': (pageName, params, _) {
        return DemoPage();
      },
    });
    FlutterBoost.handleOnStartPage();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Boost example',
        builder: FlutterBoost.init(postPush: _onRoutePushed),
        home: Container());
  }
 void _onRoutePushed(
  String pageName, String uniqueId, Map params, Route route, Future _) {}

4.3 Android 中的Application的设置

@Override
  public void onCreate() {
    super.onCreate();
    initFlutterBoot();
  }

  private void initFlutterBoot() {
    FlutterBoostPlugin.init(new IPlatform() {
      @Override
      public Application getApplication() {
        return mApplication;
      }


      @Override
      public Activity getMainActivity () {
        //这里返回null,可以避免跳转界面的(MainActivity)的页面整体上移
        return null;
      }

      @Override
      public boolean isDebug() {
        return AppConfig.IS_DEVELOPING;
      }


      @Override
      public boolean startActivity(Context context, String url, int requestCode) {
        //Flutter 跳转的回调
        return PageRouter.openPageByUrl(context,url,requestCode);
      }

      @Override
      public Map getSettings() {
        return null;
      }
    });
  }

坑1:getMainActivity 如果返回MainActivity,会导致对应的主页面的布局整体上移,发现给null也没啥问题。

4.4 Native和Flutter界面的跳转

Native–>Fluuter

可以使用官方Demo中的PageRouter

public class PageRouter {

  public static final String COMMISSION_TASK_PAGE = "gamma://flutter/commissionTaskPage";
  public static final String NATIVE_CUST_INFO_PAGE_URL = "gamma://native/custInfo";

  public static boolean openPageByUrl(Context context, String url) {
    return openPageByUrl(context, url, 0, "{}");
  }

  public static boolean openPageByUrl(Context context, String url, String json) {
    return openPageByUrl(context, url, 0, json);
  }

  public static boolean openPageByUrl(Context context, String url, int requestCode) {
    return openPageByUrl(context, url, requestCode, "{}");
  }

  public static boolean openPageByUrl(Context context, String url, int requestCode, String json) {
    try {
      if (url.startsWith(COMMISSION_TASK_PAGE)) {
        //贷后任务
        Intent intent = new Intent(context, FlutterPageActivity.class);
        intent.putExtra("pageName", "gamma://flutter/commissionTaskPage");
        intent.putExtra("json", json);
        context.startActivity(intent);
        return true;
      } else if (url.contains(NATIVE_CUST_INFO_PAGE_URL)) {
        //打开客户界面
        Map<String, String> params = getUrlParams(url);
          AppUIHelper
              .showCustomerInfoActivity(context, params.get("custId"));
        return true;
      }
    } catch (Throwable t) {
      return false;
    }
  }
//获取对应url中的参数
  private static Map getUrlParams(String url) {
    Map<String, Object> map = new HashMap<>();
    url = url.replace("?", ";");
    if (!url.contains(";")) {
      return map;
    }
    if (url.split(";").length > 0) {
      String[] arr = url.split(";")[1].split("&");
      for (String s : arr) {
        String key = s.split("=")[0];
        String value = s.split("=")[1];
        map.put(key, value);
      }
      return map;

    } else {
      return map;
    }
  }
}

这样相对于好管理,Native页面可以设置以Native开头,Flutter以flutter开头,这样好区分。

对应的FlutterPageActivity可以根据官方Demo自行修改。

坑2:FlutterPageActivity中最好加上以下代码

@Override
  protected void onCreate(Bundle savedInstanceState) {
    FlutterMain.startInitialization(this);
    super.onCreate(savedInstanceState);
  }

不然会运行报错

Flutter – >Native

这种类型跳转和Activity之间互相跳转有点类似

 FlutterBoost.singleton.openPage(
        "${NativeUrl.NATIVE_CUST_INFO}?custId=${custId};",
        {});

这中类型的跳转会回调到前面Application中的 FlutterBoostPlugin.init 方法中的startActivity方法中,只会在用PageRouter来接收即可。
之后自行做界面的跳转

5.打包的坑

在打release包的时候需要在Flutter的跟目录下执行以下命令

flutter build apk

之后是常规的Android的打包,不然打包出来的apk跳转到Flutter页面就会闪退

相关标签: flutter