Flutter技术解析与实战——闲鱼技术演进与创新-第1章(6)

简介: 本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......

1.3 混合工程与持续集成

      本节重点介绍Flutter 混合工程中解除Native 工程对Flutter 的直接依赖的具体实现方法。

1.3.1 背景思考

      因为闲鱼采用的是Flutter 和Native 混合开发的模式,所以存在一部分开发人员只做Native 开发,并不熟悉Flutter 技术。

      (1)如果直接采用Flutter 工程结构作为日常开发,则Native 开发人员也需要配置Flutter 环境,了解Flutter 技术,成本比较高。

      (2)目前阿里巴巴集团的构建系统并不支持直接构建Flutter 项目,这也要求闲鱼解除Native 工程对Flutter 的直接依赖。

      基于这两点考虑,闲鱼希望设计一个Flutter 依赖抽取模块,可以将Flutter 的依赖抽取为一个Flutter 依赖库并发布到远程,供纯Native 工程引用,如图1-16 所示。


16.jpg

图1-16

1.3.2 实现方法

      1.Native 工程依赖的Flutter 分析

      分析Flutter 工程,会发现Native 工程对Flutter 工程的依赖主要有三部分:

  • Flutter 库和引擎。Flutter 的Framework 库和引擎库。
  • Flutter 工程。我们自己实现的Flutter 模块功能,主要为在Flutter 工程lib 目录下,由Dart 代码实现的这部分功能。
  • 自己实现的Flutter Plugin。

      解开Android 和iOS 的App 文件,可以发现Flutter 依赖的主要文件如图1-17 所示。

17.jpg

图1-17

      (1)Android 的Flutter 依赖的文件

  • Flutter 库和引擎。包括icudtl.dat、libflutter.so,以及一些class 文件。它们都被封装在flutter.jar 中,这个jar 文件位于Flutter 库目录下的[flutter/bin/cache/artifacts/engine]中。
  • Flutter 工程产物。包括isolate_snapshot_data、isolate_snapshot_instr、vm_snapshot_data、vm_snapshot_instr 和flutter_assets。
  • Flutter Plugin 。各个Plugin 编译出来的AAR 文件, 包括:isolate_snapshot_data(应用程序数据段)、isolate_snapshot_instr(应用程序指令段)、vm_snapshot_data (虚拟机数据段)、vm_snapshot_instr(虚拟机指令段)。

      (2)iOS 的Flutter 依赖的文件

  • Flutter 库和引擎。Flutter.framework。
  • Flutter 工程的产物。App.framework。
  • Flutter Plugin。编译出来的各种Plugin 的Framework,以及图1-17 中的其他Framework。

      我们只需要将编译结果抽取出来,打包成一个SDK 依赖的形式提供给Native 工程,就可以解除Native 工程对Flutter 工程的直接依赖。

      2.Android 依赖的Flutter 库抽取

      (1)Android 中Flutter 编译任务分析

      Flutter 工程的Android 打包,其实只是在Android 的Gradle 任务中插入了一个flutter.gradle 任务,而flutter.gradle 主要做了三件事(这个文件可以在Flutter 库中的[flutter/packages/flutter_tools/gradle]目录下能找到):

  • 增加flutter.jar 的依赖。
  • 插入Flutter Plugin 的编译依赖。
  • 插入Flutter 工程的编译任务,得到的产物包括两个isolate_snapshot 文件、两个vm_snapshot 文件和flutter_assets 文件夹。然后将产物拷贝到mergeAssets.outputDir,最后合并到APK 的assets 目录下。

      (2)Android 的Flutter 依赖抽取实现

      对Android 的Flutter 依赖抽取步骤如下:

      (a)编译Flutter 工程

      这部分的主要工作是编译Flutter 的Dart 和资源部分,可以用AOT 和Bundle 命令编译。

echo "Clean old build"

find . -d -name "build" | xargs rm -rf

./flutter/bin/flutter clean

echo "Get packages"

./flutter/bin/flutter packages get

echo "Build release AOT"

./flutter/bin/flutter build aot --release --preview-dart-2

--output-dir= build/flutteroutput/aot

echo "Build release Bundle"

./flutter/bin/flutter build bundle --precompiled --preview-dart-2

--asset-dir=build/flutteroutput/flutter_assets

      (b)将flutter.jar 和Flutter 工程的产物打包成一个AAR

      主要工作是将flutter.jar 和第1 步编译的产物封装成一个AAR 文件。

      添加flutter.jar 依赖。

project.android.buildTypes.each {

    addFlutterJarImplementationDependency(project,

releaseFlutterJar)

}

project.android.buildTypes.whenObjectAdded {

    addFlutterJarImplementationDependency(project,

releaseFlutterJar)

}

private static void addFlutterJarImplementationDependency(Project

project, releaseFlutterJar) {

    project.dependencies {

         String configuration

         if (project.getConfigurations().findByName("api")) {

            configuration = "api"

         } else {

            configuration = "compile"

         }

         add(configuration, project.files {

            releaseFlutterJar

         })

    }

}

      将Flutter 的产物合并到assets。

// 合并 flutter assets

def allertAsset

="${project.projectDir.getAbsolutePath()}/flutter/assets/ release"

Task mergeFlutterAssets = project.tasks.create(name:

"mergeFlutterAssets${variant.name.capitalize()}", type: Copy) {

     dependsOn mergeFlutterMD5Assets

     from (allertAsset){

           include "flutter_assets/**"

           include "vm_snapshot_data"

           include "vm_snapshot_instr"

           include "isolate_snapshot_data"

           include "isolate_snapshot_instr"

     }

     into variant.mergeAssets.outputDir

}

variant.outputs[0].processResources.dependsOn(mergeFlutterAssets)

      (c)同时将AAR 文件和Flutter Plugin 编译出来的AAR 文件一起发布到Maven 仓库

      发布Flutter 工程产物打包的AAR 文件。

echo 'Clean packflutter input(flutter build)'

rm -f -r android/packflutter/flutter/

# 拷贝flutter.jar

echo 'Copy flutter jar'

mkdir -p android/packflutter/flutter/flutter/android-arm-release &&

cp

flutter/bin/cache/artifacts/engine/android-arm-release/flutter.ja

r "$_"

# 拷贝asset

echo 'Copy flutter asset'

mkdir -p android/packflutter/flutter/assets/release && cp -r build/

flutteroutput/aot/* "$_"

mkdir -p android/packflutter/flutter/assets/release/flutter_assets

&& cp -r build/flutteroutput/flutter_assets/* "$_"

# 将Flutter 库和flutter_app 打成AAR 文件,同时发布到Ali-maven

echo 'Build and publish idlefish flutter to aar'

cd android

if [ -n "$1" ]

then

      ./gradlew :packflutter:clean :packflutter:publish

-PAAR_VERSION=$1

else

      ./gradlew :packflutter:clean :packflutter:publish

fi

cd ../

      发布Flutter Plugin 的AAR 文件。

# 将Plugin 发布到Ali-maven

echo "Start publish flutter-plugins"

for line in $(cat .flutter-plugins)

do

    plugin_name=${line%%=*}

    echo 'Build and publish plugin:' ${plugin_name}

    cd android

    if [ -n "$1" ]

    then

         ./gradlew :${plugin_name}:clean :${plugin_name}:publish

-PAAR_VERSION =$1

    else

         ./gradlew :${plugin_name}:clean :${plugin_name}:publish

    fi

    cd ../

done

      (d)纯粹的Native 项目只需要依赖我们发布到Maven 的AAR 文件即可。

      在平时开发阶段,需要实时地依赖最新的AAR 文件,所以采用snapshot 版本。

configurations.all {

    resolutionStrategy.cacheChangingModulesFor 0, 'seconds'

}

ext {

    flutter_aar_version = '6.0.2-SNAPSHOT'

}

dependencies {

    //Flutter 主工程依赖:包含基于Flutter 开发的功能、Flutter 引擎lib

compile("com.taobao.fleamarket:IdleFishFlutter:${getFlutterAarVer

sion(project)}") {

         changing = true

    }

    //其他依赖

}

static def getFlutterAarVersion(project) {

    def resultVersion = project.flutter_aar_version

    if (project.hasProperty('FLUTTER_AAR_VERSION')) {

       resultVersion = project.FLUTTER_AAR_VERSION

    }

    return resultVersion

}

相关文章
|
8月前
|
机器学习/深度学习 JSON 自然语言处理
Flutter敏感词过滤实战:基于AC自动机的高效解决方案
在社交、直播等场景中,敏感词过滤至关重要。本文介绍基于AC自动机的Flutter高效敏感词过滤方案,通过构建Trie树与失败指针实现线性时间复杂度的多模式匹配,支持干扰字符处理与动态优化。代码实战结合性能对比,助你打造毫秒级响应的过滤系统,适用于聊天、评论、内容审核等场景,保障平台安全。
431 69
|
5月前
|
前端开发 Java 开发者
SpringBoot 3 + Flutter3 实战低代码运营管理
Spring Boot 3 与 Flutter 3 强强联合,助力现代 Web 与移动应用开发。Spring Boot 3 提升后端开发效率,支持最新 Java 特性;Flutter 3 实现跨平台高性能 UI,热重载加速前端迭代。两者结合打造高效、可扩展的应用开发新体验。
251 0
|
9月前
|
索引
【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
在 Flutter 开发中,AzListView 是实现字母索引分类列表的理想选择。它支持 A-Z 快速跳转、悬浮分组标题、自定义 UI 和高效性能,适用于通讯录、城市选择等场景。本文将详细解析 AzListView 的核心参数和实战示例,助你轻松实现流畅的索引列表。
441 7
|
12月前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
1121 5
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
878 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
542 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
12月前
|
容器
Flutter Widget 解析
Flutter Widget 解析
183 2
|
UED
<大厂实战经验> Flutter&鸿蒙next 中使用 initState 和 mounted 处理异步请求的详细解析
在 Flutter 开发中,处理异步请求是常见需求。本文详细介绍了如何在 `initState` 中触发异步请求,并使用 `mounted` 属性确保在适当时机更新 UI。通过示例代码,展示了如何安全地进行异步操作和处理异常,避免在组件卸载后更新 UI 的问题。希望本文能帮助你更好地理解和应用 Flutter 中的异步处理。
314 5
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
432 1
|
开发框架 Dart Android开发
安卓与iOS的跨平台开发:Flutter框架深度解析
在移动应用开发的海洋中,Flutter作为一艘灵活的帆船,正引领着开发者们驶向跨平台开发的新纪元。本文将揭开Flutter神秘的面纱,从其架构到核心特性,再到实际应用案例,我们将一同探索这个由谷歌打造的开源UI工具包如何让安卓与iOS应用开发变得更加高效而统一。你将看到,借助Flutter,打造精美、高性能的应用不再是难题,而是变成了一场创造性的旅程。

推荐镜像

更多
  • DNS