huazi

huazi

浅谈 Flutter 的 Android 混合开发

本篇文章为公司内部分享时所写,基于的 flutter 版本也已过时,所以可能有不对的地方,还请指出。现在放到博客上,以后有机会再完善。

前言#

Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作。
Flutter 具有以下特点:
快速开发,毫秒级的热重载,修改后,您的应用界面会立即更新。
统一的应用开发体验
原生性能
目前已经有不少大公司开始将 flutter 应用在项目中,比如,闲鱼、美团等,也得到了不错的反馈。
https://github.com/alibaba/flutter-go
文章暂时比较简单,之后各个模块可以细化

flutter 介绍及安装#

对于构建 Flutter 类型应用,因其开发语言 Dart、虚拟机、构建工具与平时我们开发 Native 应用不同且平台虚拟机也不支持,所以需要 flutter sdk 来支持。
flutter 有点类似 gradle,不同的开发人员可能安装不同版本的 flutter,flutter sdk 版本不一致,往往会出现 Dart 层 Api 兼容性或 Flutter 虚拟机不一致等问题。(这个问题可以参照 Android gradle 管理,将 gradle 版本跟项目绑定来处理)

具体 flutter sdk 安装可以按照官方文档来操作:https://flutter.dev/docs/get-started/install/macos
或者 flutter 中文文档:https://flutterchina.club/setup-macos/

安装基本没有什么坑,有墙的问题可以参考中文文档使用 Flutter 官方为中国开发者搭建了临时镜像。

配置好就可以使用 flutter 的一些命令,比如 flutter doctor

Flutter 四种工程类型#

Flutter 工程中,通常有以下几种工程类型,下面分别简单概述下:

  1. Flutter Application
    标准的 Flutter App 工程,包含标准的 Dart 层与 Native 平台层

  2. Flutter Module
    Flutter 组件工程,仅包含 Dart 层实现,Native 平台层子工程为通过 Flutter 自动生成的隐藏工程

  3. Flutter Plugin
    Flutter 平台插件工程,包含 Dart 层与 Native 平台层的实现

  4. Flutter Package
    Flutter 纯 Dart 插件工程,仅包含 Dart 层的实现,往往定义一些公共 Widget

已有项目使用 flutter#

已有的项目想改成纯 flutter 项目基本不可能,目前只能是开发部分模块功能使用,比如现在磁场项目中的体现功能。因此 flutter 官方出了向原生项目中添加 flutter 的项目:
https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

目前想要的效果是:

  • 非 flutter 开发人员无感知
  • 对现有项目无侵入
  • 不需要对现有的持续集成和编译发布进行修改
  • 方便 flutter 开发人员开发

官方的项目是将 flutter 项目作为 module 来依赖,但是这对项目修改太大,只适用于开发人员。因此我们需要考虑其他的方式。在文档中我们知道,通过./gradlew flutter:assemble 是可以打包出 aar,这个 aar 其实是 flutter 生成的产物打包成 aar,来供项目使用的。我们可以利用这个,来只使用 aar,这样基本满足了上面的部分条件。但是如果是每次生成一个 aar 再拷贝到主项目 libs 下,这样每次处理太麻烦了,如果能将 aar 进行远程依赖就更好了,上面的要求基本就都满足了,对原生项目来说只是一个远程依赖而已,需要更新时则修改版本号即可。

至此,我们梳理出流程:

  • flutter aar 作为远端依赖
  • 本地有配置是否是 flutter 开发环境
    • 开启开发环境,则使用本地依赖方式
    • 关闭开发环境,使用远端依赖
    • 默认关闭
  • flutter 项目可自动打包上传 aar 至远端仓库

flutter module 的项目结构如下图:

flutter_android_img.jpeg

.android 和 .ios 都是自动生成的,可以随时删除,通过flutter packages get 获取, flutter 代码主要在 lib 下。注意在.android 和.ios 目录下都有一个 Flutter 目录,这个是我们 flutter 的库项目了。也就是 Android 用来生成 aar,iOS 用来生产 framework 的库。如果我们用 flutter create xxx 生成的纯 flutter 项目是没有这个 Flutter 目录的。

开发遇到的坑#

  1. 项目配置 productFlavor,导致无法将 flutter_assets 打包进 apk

其实这个是 flutter 的新版的 bug,flutter 的构建都是通过 flutter.gradle 来进行的,新的版本中做了一些改变,以为其中硬编码的原因,导致配置了 productFlavor 后无法执行某些 task,也就没有无法将 flutter_assets 打包进 apk。从而引起崩溃。

做了个临时解决方案:

  • 创建代理 flutter 构建的 gradle 文件,即 flutter_proxy.gradle,从 flutter.gradle 复制而来
  • 修改其关于配置了 productFlavor 后的执行 task 的逻辑,确保执行相关 productFlavor 的打包 task
  • build.gradle 中替换 flutter.gradleflutter_proxy.gradle

这样就可以正常使用 gradle 打包了,缺点就是每次 flutter package get 需要重新改

注:该 Bug 在新版 flutter sdk 中已修复

  1. 还有个疑问就是 ./gradlew flutter:assemble 打出的 aar 安装后,原生页面打开 flutter 页面时崩溃,但是打包命令去掉 flutter 却可以,即 ./gradlew assemble,猜测跟打包流程有关系,暂时没有深入去研究

  2. appbar 设置属性时默认设置了状态栏
    解决办法:单独调整状态栏属性,或修改主题

  3. flutter 项目中默认生成的 build.gradle 中依赖的是 support 27.1.1,目前项目中使用的是 26.1.0,导致包依赖冲突

对于远端依赖时可以移除他的 support 依赖,如下:

implementation('com.huazidev:test-futter-aar:0.0.2@aar', {
     exclude group: 'com.android.support'
})

对于本地开发环境可以做如下配置:

implementation(project(':flutter')){
      exclude group: 'com.android.support'
}

另外,也可以在 gradle 中统一修改所有的 support 依赖版本,


下一章,待完善#

  • 编写脚本,自动打包发布 aar
  • 发布到 jcenter 、maven 等开源仓库
  • 发布到自建的私有 maven 仓库
  • 使用 jitpack 发布 (私有仓库收费)
  • 使用 github 提供的功能作为包管理仓库(支持私有仓库)
加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。