flutter相机下载，flutter官方app

Flutter真香，我用它写了个桌面版JSON解析工具

Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。

话不多说，先来看看实际效果。 项目源码地址

开发环境如下：

Flutter : 2.8.1

Dart : 2.15.1

IDE : VSCode

JSON作为我们日常开发工作中经常要打交道的一种数据格式，它共有6种数据类型： null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中，又需要接触到json解析时，就会感觉非常棘手，因为flutter没有反射，导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。

数据量少还能接受，一旦量大，那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码，也解决了flutter界json转模型的空缺。当然，业界也有专门解析json的网站，可以自动生成dart代码，使用者在生成后复制进项目中即可，也是非常方便的。

本项目以json解析为切入点，和大家一起来看下flutter是如何开发桌面应用的。

要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下，让我们的项目支持 windows 和 macos 系统。

接下来使用 flutter create 命令创建我们的模版工程。

创建完项目后，我们就可以 run 起来了。

先来看下整体界面，界面四块，分别为功能模块、文件选择模块、输入模块、输出模块。

我们在新建一个桌面应用时，默认的模版又一个Appbar，此时应用可以用鼠标拖拽移动，放大缩小，还可以缩到很小。但是，我们一旦去掉这个导航栏，那么窗口就不能用鼠标拖动了，并且我们往往不希望用户将我们的窗口缩放的很小，这会导致页面异常，一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ，我们可以实现窗口的定制化，拖动，最小尺寸，最大尺寸，窗口边框，窗口顶部放大、缩小、关闭的按钮等。

通过 InkWell 组件，可以捕捉到手势、鼠标、触控笔的移动和停留位置

这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根结点不是 Material 风格的组件，因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置，否则它将全屏显示。

读取说表拖拽的文件一开始想尝试使用 InkWell 组件，但是这个组件无法识别拖拽中的鼠标，并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ，能满足要求。

使用开源组件 file_picker ，选完图片后的操作和拖拽选择图片后的操作一致。

Textfield 如果要显示富文本，那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。

在做导出功能时遇到下列报错，保存提示为没有权限访问对应目录下的文件。

通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ，表示 对用户的下载文件夹的读/写访问权限 。那么，使用Xcode打开Flutter项目中的mac应用，修改工程目录下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并将值设置为YES，保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。

当然，这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。

原文地址：

相关问答

Q1: Flutter入门这一篇效率文章就够了

本文面向 Flutter 初学者，旨在用易懂的方式带大家入门。除了 Flutter 代码，还会介绍到语法、原理、特性等基础知识。相信本文能帮助你学习和理解 Flutter。

我们先看一下目前的一些跨平台方案，从前端渲染的角度来分类的话，大致可以分为以下几种方案。

WebView 渲染

这种方案就很好理解，现在很多项目都会嵌入 H5 的页面。就是用 JavaScript 等前端技术进行开发，在客户端上用 WebView 来进行渲染。微信小程序目前使用的就是这种方案。

它的优点很明显，使用成熟的前端技术进行开发，学习成本低，开发效率高，并且支持动态发布代码。

但缺点也很明显，在性能体验上，和原生还是存在较大差距的。

原生控件渲染

既然 WebView 的性能不够好，于是就有了使用原生控件进行渲染的方案。这种方案，同样也是使用 JavaScript 开发，区别是它最终是调用原生控件进行渲染的。这种方案的代表是 Facebook 的 React Native。

由于使用原生控件进行渲染，性能体验也会更接近原生。但也只是更接近，和原生还是有差距的，因为它需要频繁的进行 JavaScript 和原生之间的通信，这个通信效率是比较低的。

另外，由于需要适配各个平台的控件，那就有可能出现，系统控件更新了，而框架本身还没有更新，由此产生了一些问题。换句话说，这种方案是受到原生控件限制的。

绘图引擎渲染

接下来就是主角了。

在前端，如果完全不使用原生控件，我们可以通过系统的绘图 API 绘制出一个用户界面。从这个角度出发，可以在各个平台使用一个统一接口的绘图引擎来进行界面绘制，这个引擎最终调用的是系统的 API 绘制的。这样的话，它的性能可以做到接近原生，并且又不受原生控件的限制，在不同平台上能够做到 UI 统一。

Flutter 就是这样的一个开发框架。

一个跨平台 UI 解决方案

Flutter 是由 Google 开发的，一个跨平台 UI 解决方案。换句话说，它原则上只管 UI 的问题，如果涉及到平台本身的一些功能，比如调用蓝牙、摄像头，一般还是需要原生代码去操作。但现在也会有一些第三方库帮我们解决这些问题。

绘图引擎 Skia

Flutter 使用 Skia 作为它的绘图引擎。Skia 已经被 Google 收购，目前很多 Google 旗下的产品都是用 Skia 绘制的，包括 Android。

Android 内置了 Skia，但 iOS 没有，所以在打 iOS 安装包的时候，会把 Skia 一起打进去。这就导致了，用同一份 Flutter 代码打包之后，iOS 的包要比 Android 的包大一些。

开发语言 Dart

Flutter 使用的开发语言，叫 Dart。Dart 也是 Google 自家的，它是一门面向对象的语言，从它身上会看到一些其他开发语言的影子。学习起来难度不大的。

前面讲跨平台方案的时候，可以发现别的方案基本都是用 JavaScript 作为开发语言的，但为什么 Flutter 不用？就因为 Dart 是谷歌自家的吗？这个问题先留着，我们后面会提到。

这里部分就简单点带过了，具体的搭建流程可以在官网查看:

主要的搭建步骤如下:

下载 Flutter SDK

官网下载地址：

由于在国内访问可能受限，官方为中国开发者搭建了镜像：

更新环境变量

解压后，将 flutter\bin 的全路径添加到环境变量 PATH 中。

安装开发工具

理论上，任何文本编辑器都可以用来开发 Flutter 应用，但推荐的开发工具是 Android Studio、IntelliJ 以及 VS Code。因为在这些开发工具上，可以安装官方的 Flutter 和 Dart 插件，得到更好的开发体验。文章里使用 Android Studio 来演示。

如果你打算开发 iOS 应用，则还需要安装 Xcode。

安装插件

在开发工具的插件设置中，安装上面说到的 Flutter 和 Dart 插件。Flutter 插件用于支持 Flutter 的运行、调试、热重载等功能，而 Dart 插件则提供了代码的输入校验、代码补全等功能。

万物始于 Hello World，我们先来创建一个显示 Hello World 的 Flutter 项目。

在 Android Studio 的欢迎页面选择 Start a new Flutter project ，或者通过菜单栏的 File New New Flutter Project ，创建一个新的 Flutter 项目。

创建好的项目里面包含了 android 和 ios 两个文件夹，它们是标准的 Android 和 iOS 项目。我们的 Flutter 代码，存放在 lib 文件夹里。项目创建好后，会默认带一个计数器的示例，我们不管它，把 main.dart 的代码改成 Hello World:

启动一个模拟器，或者连上真机，点击 Run 运行一下，就能看这样一个界面了：

具体代码先混个眼熟就好，具体的后面会再讲到。

在写 Flutter 之前，还要先跟大家简单介绍一下 Dart 的语法。如果你有 Java 或 JavaScript 的开发经验，以及面向对象的编程思想，学起来是很快的。

我们可以在 test 文件夹下新建一个 dart 文件，用来写测试代码。

指定类型

var

但和 JavaScript 不同的是，以下代码在 JavaScript 是不会报错的，但在 Dart 里会报错：

Object

如果非要上面这样写，那也可以。把 var 换成 Object 就不报错了：

和 Java 类似，Object 是所有对象的根基类。但是这样的话，如果想打印一下 num 的字符串长度，是会报错的：

因为 length 是属于 String 的，但系统只知道 num 是一个对象，并不知道它是一个 String。

dynamic

如果还是非要这样写，那也可以。Dart 有一个特有的关键字 dynamic，把 Object 改成 dynamic 就不报错了：

我们运行一下这个文件，可以在控制台看到正确打印出了字符串长度。

函数

dynamic

在 Dart 里，函数也是可以不写返回类型的，不写的话会被当做 dynamic 来处理。这样的话，函数的类型就是 return 的类型，如果没有 return 则是 void 类型。比如可以这样:

运行之后是能正确打印出字符串长度的。

用于传参

Dart 里的函数也是一个对象，所以可以把函数作为参数来传递，比如：

可选参数

在 Dart 的函数传参里，有一个叫可选参数的概念，我们以文字控件 Text 为例，在源码里可以看到 Text 的构造函数是这样的:

首先，在参数里有一个 data，它是要显示的文字内容，是一个必填项。而 data 后面的一堆参数，是用一个大括号括起来的，这些参数就叫做可选参数，意思是这些参数可传可不传。

假如我们要显示一个比较长的文字，又想限制它最多显示两行，就可以这样来创建一个 Text:

可选参数，在 Flutter 里面用的非常多。

异步

Future

在 Dart 里使用 Future 来处理异步任务，比如我们现在延时一秒打印 666，代码如下：

Future 的语法和 Promise 非常像。任务执行成功会调用 then，执行失败会调用 catchError，而无论成功还是失败，都会调用 whenComplete。

async/await

如果你不喜欢上面那种写法，或者是想把异步转成同步，就可以用 async 和 await 这两个关键字来转换。

我们把上面的代码转换一下，写一个 getString 方法，返回的类型是 Future，它会延时返回一个字符串。在 main 函数后面加上 async 关键字，在 getString() 前面加上 await，代码如下:

运行之后可以看到，能正常延时一秒后，把字符串打印出来。这里 getString() 返回的类型是 Future，而 await getString() 则是返回了延时之后返回的字符串。await 要在 async 的函数里面才能使用。

async 和 await 其实是一个语法糖，它最终也是转换成 Future 调用链的形式执行的。

接下来回到 Flutter，Flutter 里最重要的一个概念是 Widget（下面翻译作控件）。

在原生开发里面，我们可能会在界面上区分，这是一个 View，这是一个 Layout，这是一个 View Controller。但在 Flutter 里面，它们全都属于一个统一的模型 Widget。可以说，在 Flutter 界面里，所有东西都是 Widget。

以前学面向对象的时候，我们都听过一句话，叫万物皆对象。我这里套用一下，在 Flutter 里， 万物皆控件 。

具体有哪些控件，我做了一下简单的分类。

根控件

所有的控件都属于 StatefulWidget 或 StatelessWidget 。它们的区别是，StatefulWidget 拥有状态 State ，而 StatelessWidget 没有。

StatefulWidget

当一个控件是可变的时候，就要使用 StatefulWidget 来构建。StatefulWidget 本身不可变，但它持有的状态 State 是可变的。

StatelessWidget

当一个控件状态是固定不可变的时候，就可以使用 StatelessWidget。前面我们写的 Hello World 就是使用 StatelessWidget。

容器控件

容器类控件一般是将某些属性或配置，作用在它的子控件上，比如控件所在的宽高、背景、位置等。

常用的容器控件有 Container、Center、Padding 等。

布局控件

布局控件可以类比作原生开发中的 Layout，通常它会拥有一个 children 的属性，用于接收一个控件数组，对这些控件进行特定的排版。

常用的布局控件有 Row、Column、Stack、Flex 等。

基础控件

基础控件就是常用的文字、按钮、图片等控件。

常用的基础控件有 Text、TextField、Button、Image 等。

功能控件

在 Flutter 里还有一类控件，它们不影响 UI 布局，但带有一些特定的功能，比如页面跳转、事件监听、定义主题等。我们把这一类控件称作功能控件。

常用的功能控件有 Navigator、NotificationListener、Theme 等。

开始写 Flutter 代码了。还记不记得，在 Flutter 项目创建之后，是自带一个计数器 demo 的，现在我们用自己的代码实现一遍。代码修改成如下：

运行之后，就可以看到这样的界面了：

按钮每点击一次，数字就会加一。下面我们来分析一下这段代码，看下里面用到的一些 Widget。

StatefulWidget

由于页面中的数字是跟随状态变化的，所以该页面改用 StatefulWidget。StatefulWidget 并不会直接返回一个 Widget，而是返回状态 State，在 State 里再返回 Widget。

Scaffold

Scaffold 是一个标准的 Material Design 页面，它包含了标题栏、浮动按钮、侧滑菜单、底部导航栏等配置。我们这里用到了标题栏 appBar、页面内容 body、浮动按钮 floatingActionButton。

AppBar

AppBar 就是标题栏，通过查看控件的构造方法，我们可以知道它可配置的属性。

AppBar 的可选参数除了标题 title，还可以配置标题前的内容 leading，右侧的操作按钮 anctions，控件垂直高度 elevation 等。我们只传了 title，其他属性都用默认值。

Center

Center 是一个容器类控件，它的作用就是让它的子控件居中显示。

FloatingActionButton

熟悉安卓开发的应该对这个控件比较熟悉，它就是页面右下角一个特定样式的 Button，参数里面的 onPressed 是一个必填项，要传一个点击之后的回调函数。

根据这个例子，下面给大家介绍一下 Flutter 两个比较重要的特性。

点击 Button 之后，我们把 num 变量加一，并使用 setState 通知状态发生了改变，Flutter 会根据新的状态更新 UI。如果有接触过小程序开发，setState 就和小程序的 setData 类似。

在 Flutter 里面我们不需要用 set 方法来更新 UI，可变控件是和状态绑定的，这就是 Flutter 的响应式 UI 编程。

在 Android Q 和 iOS 13 里都加入了暗黑模式，我们也换一个暗黑主题来玩一下。MaterialApp 里有一个 theme 的属性，我们把它配置一下:

这次改完之后不点 Run 了，我们点一下闪电图标 Flutter Hot Reload ，就能看到界面发生了变化:

这就是 Flutter 的 热重载 ，在修改完代码之后，通过热重载就能马上在设备上看到修改结果，可以很大程度上增加开发效率。

下面再给大家介绍几个 Flutter 里的常见操作。

在 Flutter 里，使用 Navigator 来管理页面跳转，比如要跳转到一个 NewPage 可以这样写:

进栈使用 push，出栈则是 pop。

使用 MaterialPageRoute 会模拟出 Android 上页面跳转的过场效果。

我们来看看怎么显示一张本地图片。

先在根目录新建一个存放图片的文件夹，比如叫 images，把图片 picture.png 放进去。

找到根目录下的 pubspec.yaml 文件，这个便是 Flutter 依赖配置文件，我们需要在这里配置一下刚才的图片：

这样，我们就能使用 Image 控件把这张图片显示出来了：

和 node 的 npm 以及 Android 的 jcenter 类似，Flutter 也拥有一个公共仓库 pub.dev。pub.dev 是 Google 官方的 Dart 仓库，在上面可以找到我们需要的包和插件。

Flutter 本身没有 Toast，我们来接入一个。在 pub.dev 上搜索后，我决定使用 fluttertoast：

按照说明，在 pubspec.yaml 文件里的 dependencies 下配置：

点一下 Android Studio 右上角的 Packages get 同步之后就可以使用了：

我们上面使用的都是 Material Design 的控件，它们都是在 flutter/material.dart 包里面的。如果要使用 iOS 风格的控件，则要用到 flutter/cupertino.dart 包：

iOS 风格的控件，基本都以 Cupertino 开头。我们把计时器页面里的控件替换一下：

效果如下：

代码的部分就到这里了，接下来跟大家聊一下编译方式，编程语言的编译方式有两种。

关于它们孰优孰劣，就要看从哪个角度去对比了。JIT 的话，它的一大特点就是支持动态发布代码，也就是支持热更新。但要是从性能的角度考虑，AOT 会更好，因为在运行的时候不用再进行编译的操作的，运行的效率会更高一些。

回到我们一开始的时候留下的问题，为什么别的跨平台方案都是用 JavaScript，而 Flutter 要用 Dart 来开发。JavaScript 的编译方式是 JIT 的，它不支持 AOT。而 Dart 同时支持 JIT 和 AOT。

Flutter 在开发阶段使用 JIT，让我们用上了热重载，增加了开发效率。在打包时改用 AOT，保证了正式版应用的性能。

最后讲一下大家比较关心的一个东西，Flutter 是否支持热更新？前面说到 Dart 支持 JIT，所以从技术层面它是支持的。但是目前是不支持的，在官方的计划文档中，可以看到:

至于原因，官方在这里进行了说明。总的来说，是由于政策的限制，以及出于对性能和安全性的考虑，暂时不支持了。

到这就结束啦。由于想把 Flutter 基础在一篇内讲完，没有涉及太多细节，如果要写 Flutter 代码还需要深入学习。但相信理解之后再学，会轻松很多。

Q2: 记录flutter-folio开源项目启动报错Method not found

下载了一个开源项目flutter-folio

编译的时候一直在说方法找不到。

Error: Method not found:

是cloud_firebase_web跳转找firebase_core的某个方法的时候说找不到。

按照网上说的在firebase包定义前面添加关键字dependency_overrides:也不行。

开始的时候尝试着自己修改方法名让它能够找到，一直搞不定。总感觉这个是系统自带的类库，不应该发生这么低级的错误了。

最后仔细看了一下他们的版本不对应，有可能是版本问题，cloud_firebase_web是1.0.7，使用工具跳转到firebase_core的时候是1.17.0

然后就尝试着手动修改firebase_core关联的包，不要让它自动匹配版本，而是强制使用某一个固定版本。

比如之前是这么写的：firebase_core: ^1.0.1，^含义是找到大于1.0.1小于2.0.0的最高版本

修改成：firebase_core: 1.4.0

具体有哪些版本可以去这个网站上找：

然后就可以了。

事后分析原因是：firebase_core虽然没有修改大版本号，当前依然是1.17.0。但是里面做了不兼容的改动，删除了某些方法，导致了找不到。而cloud_firebase_web当前的最高版本已经是3点几了，因此对应firebase_core版本的cloud_firebase_web在2或者3才兼容。

所以包管理真的是一件比较麻烦的事情。

Q3: Flutter下载jar速度慢

文章转自：

用Android Stduio创建Flutter项目的时候，会出现各种问题，踩了一个又一个，最后编译的时候可能会出现一直显示Running Gradle task 'assembleDebug'然后就不动了，或者会显示Could not resolve io.flutter等问题，归根结底是网络无法访问到Google服务引起的，两种解决方案：

1.具有比较良好的访问谷歌的网络环境

2.修改镜像源为国内的：

找到Flutte SDK目录下的Flutter打包配置文件flutter.gradle

路径为flutter\packages\flutter_tools\gradle\flutter.gradle

第一处配置：

buildscript {

repositories {

//注释

// google()

// jcenter()

//添加

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

dependencies {

classpath 'com.android.tools.build:gradle:3.5.0'

}

}

第二处配置：

class FlutterPlugin implements PluginProject {

//注释

// private static final String MAVEN_REPO = " ";

//添加这行

private static final String MAVEN_REPO = " ";

第三处配置：

void addFlutterDependencies(buildType) {

String flutterBuildMode = buildModeFor(buildType)

if (!supportsBuildMode(flutterBuildMode)) {

return

}

String repository = useLocalEngine()

? project.property('local-engine-repo')

: MAVEN_REPO

最后一处，项目中的配置，修改Flutter项目下的android下的build.gradle：

buildscript {

ext.kotlin_version = '1.3.50'

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

}

allprojects {

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

}

修改完成后，再build，就可以正常构建了！！！

Q4: 做混合的话Uniapp和Flutter我应该学哪个啊？

本文由阿里闲鱼技术团队祈晴分享，本次有修订和改动，感谢作者的技术分享。

1、内容概述

本文总结了阿里闲鱼技术团队使用Flutter在对闲鱼IM进行移动端跨端改造过程中的技术实践等，文中对比了传统Native与现在大热的Flutter跨端方案在一些主要技术实现上的差异，以及针对Flutter技术特点的具体技术实现，值得同样准备使用Flutter开发IM的技术同行们借鉴和参考。

学习交流：

- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM》

- 开源IM框架源码：

（本文同步发布于：）

2、闲鱼IM现状

闲鱼IM的移动端框架构建于2016至2017年间，期间经过多次迭代升级导致历史包袱累积多，后面又经历IM界面的Flutter化，从而造成了客户端架构愈加复杂。

从开发层面总结闲鱼IM移动端当前架构主要存在如下几个问题：

1）研发效率较低：当前架构涉及到Android/iOS双端的逻辑代码以及Flutter的UI代码，定位问题往往只能从Flutter UI表相倒查到Native逻辑层；

2）架构层次较差：架构设计上分层不清晰，业务逻辑夹杂在核心的逻辑层致使代码变更风险大；

3）性能测试略差：核心数据源存储Native内存，需经Flutter Plugin将数据源序列化上抛Flutter侧，在大批量数据源情况下性能表现较差。

从产品层面总结闲鱼IM移动端当前架构的主要问题如下：

1）定位问题困难：线上舆情反馈千奇百怪，测试始终无法复现相关场景，因此很多时候只能靠现象猜测本质；

2）疑难杂症较多：架构的不稳定性造成出现的问题反复出现，当前疑难杂症主要包括未读红点计数、iPhone5C低端机以及多媒体发送等多个问题；

3）问题差异性大：Android和iOS两端逻辑代码差异大，包括埋点逻辑都不尽相同，排查问题根源时双端都会有不同根因，解决方案也不相同。

3、业界的移动端跨端方案

为解决当前IM的技术痛点，闲鱼今年特起关于IM架构升级项目，重在解决客户端中Andriod和iOS双端一致性的痛点，初步设想方案就是实现跨端统一的Android/iOS逻辑架构。

在当前行业内跨端方案可初步归类如下图架构：

在GUI层面的跨端方案有Weex、ReactNative、H5、Uni-APP等，其内存模型大多需要通过桥接到Native模式存储。

在逻辑层面的跨端方案大致有C/C++等与虚拟机无关语言实现跨端，当然汇编语言也可行。

此外有两个独立于上述体系之外的架构就是Flutter和KMM（谷歌基于Kotlin实现类似Flutter架构），其中Flutter运行特定DartVM，将内存数据挂载其自身的isolate中。

考虑闲鱼是Flutter的前沿探索者，方案上优先使用Flutter。然而Flutter的isolate更像一个进程的概念（底层实现非使用进程模式），相比Android，同一进程场景中，Android的Dalvik虚拟机多个线程运行共享一个内存Heap，而DartVM的Isolate运行隔离各自的Heap，因而isolate之间通讯方式比较繁琐（需经过序列化反序列化过程）。

整个模型如下图所示：

若按官方混合架构实现Flutter应用，开启多个FlutterAcitivty/FlutterController，底层会生成多个Engine，对应会存在多个isolate，而isolate通讯类似于进程通讯（类似socket或AIDL），这里借鉴闲鱼FlutterBoost的设计理念，FlutterIM架构将多个页面的Engine共享，则内存模型就天然支持共享读取。

原理图如下：

4、闲鱼IM基于Flutter的架构设计

4.1 新老架构对比

如下图所示：是一个老架构方案，其核心问题主要集中于Native逻辑抽象差，其中逻辑层面还设计到多线程并发使得问题倍增，Android/iOS/Flutter交互繁杂，开发维护成本高，核心层耦合较为严重，无插拔式概念.

考虑到历史架构的问题，演进如下新架构设计：

如上图所示，架构从上至下依次为：

1）业务层；

2）分发层；

3）逻辑层；

4）数据源层。

数据源层来源于推送或网络请求，其封装于Native层，通过Flutter插件将消息协议数据上抛到Flutter侧的核心逻辑层，处理完成后变成Flutter DB的Enitity实体，实体中挂载一些消息协议实体。

核心逻辑层将繁杂数据扁平化打包挂载到分发层中的会话内存模型数据或消息内存模型数据，最后通过观察者模式的订阅分发到业务逻辑中。

Flutter IM重点集中改造逻辑层和分发层，将IM核心逻辑和业务层面数据模型进行封装隔离，核心逻辑层和数据库交互后将数据封装到分发层的moduleData中，通过订阅方式分发到业务层数据模型中。

此外在IM模型中DB也是重点依赖的，个人对DB数据库管理进行全面封装解，实现一种轻量级，性能佳的Flutter DB管理框架。

4.2 DB存储模型

Flutter IM架构的DB存储依赖数据库插件，目前主流插件是Sqflite。

其存储模型如下：

依据上图Sqflite插件的DB存储模型会有2个等待队列：

一个是Flutter层同步执行队列；

一个是Native层的线程执行队列。

其Android实现机制是HandlerThread，因此Query/Save读写在会同一线程队列中，导致响应速度慢，容易造成DB SQL堆积，此外缺失缓存模型。

于是个人定制如下改进方案：

Flutter侧通过表的主键设计查询时候会优先从Entity Cache层去获取，若缓存不存在，则通过Sqflite插件查询。

同时改造Sqflite插件成支持sync/Async同步异步两种方式操作，对应到Native侧也会有同步线程队列和异步线程队列，保证数据吞吐率。但是这里建议查询使用异步，存储使用同步更稳妥，主要怕出现多个相同的数据元model同一时间进入异步线程池中，存储先后顺序无法有效的保证。

4.3 ORM数据库方案

IM架构重度依赖DB数据库，而当前业界还没有一个完备的数据库ORM管理方案，参考了Android的OrmLite/GreenDao，个人自行设计一套Flutter ORM数据库管理方案。

其核心思想如下：

由于Flutter不支持反射，因此无法直接像Android的开源数据库方式操作，但可通过APT方式，将Entity和Orm Entity绑定于一身，操作OrmEntity即操作Entity，整个代码风格设计也和OrmLite极其相似。

参考代码如下：

4.4 IM内存数据模型

基于Flutter的IM移动端架构在内存数据模型主要划分为会话和消息两个颗粒度：

1）会话内存数据模型交托于SessionModuleData：会话内存数据有一个根节点RootNotice，然后其挂载PSessionMessageNotice（这里PSessionMessageNotice是ORM映射的会话DB表模型）子节点集合。

2）消息内存数据模型交托于MessageModuleData：消息内存数据会有一个MessageConatiner容器管理，其内部挂载此会话中的PMessage(PMessage是ORM映射的消息DB表模型)消息集合。

依据上一章节，PSessionMessageNotice设计了一个OrmEnitity Cache，考虑到IM中会话数是有限的，因此PSessionMessageNotice都是直接缓存到Cache中。

这种做法的好处是各地去拿会话数据元时候都是缓存中同一个对象，容易保证多次重复读写的数据一致性。而PSessionMessageNotice考虑到其数量可以无限多的特殊性，因此这里将其挂载到MessageContainer的内存管理中，在退出会话的时机会校验容器中PMessage集合的数量，适当缩容可以减少内存开销。

模型如下图所示：

4.5 状态管理方案

基于Flutter的IM移动端架构状态管理方案比较简单，对数据源Session/Message维度使用观察者模式的订阅分发方式实现，架构类似于EventBus模式，页面级的状态管理无论使用fish-redux、scopeModel或者provider几乎影响面不大，核心还是需保留一种插拔式抽象更重要。

架构如下图：

4.6 IM同步模型方案

当前现状的消息同步模型：

如上图所示是，模型中存在ACCS Thread/Main Thread/Region Thread等多线程并发场景，导致易出现多线程高并发的问题。

native的推送和网络请求同步的隔离方案通过Lock的锁机制，并且通过队列降频等方式处理，流程繁琐且易出错。整体通过Region Version Gap去判断是否有域空洞，进而执行域同步补充数据。

改进的同步模型如下：

如上图所示，在Flutter侧天然没多线程场景，通过一种标记位的转化同步异步实现类似Handler消息队列，架构清晰简约了很多，避免锁带来的开销以及同步问题。

5、本次改造进展以及性能对比

1）针对架构层面：

在基于Flutter的IM架构中，重点将双端逻辑差异性统一成同一份Dart代码，完全磨平Android/iOS的代码差异性带来的问题。

带来的好处很明显：

1）降低开发维护、测试回归、视觉验收的一半成本，极大提高研发效率；

2）架构上进行重构分层，实现一种解耦合，插拔式的IM架构；

3）同时Native到Flutter侧的大量数据上抛序列化过程改造程Flutter引用传递，解决极限测试场景下的私聊卡顿问题。

2）针对线上舆情：

1）补齐UT和TLog的集团日志方式做到可追踪，可排查；

2）针对于很多现存的疑难杂症重点集中专项解决，比如iphone5C的架构在Flutter侧统一规划；

3）未读红点计数等问题也在架构模型升级中修复；

4）此外多媒体音视频发送模块进行改造升级。

3）性能数据对比：

当IM架构的逻辑层和UI层都切换成Flutter后，和原先架构模式初步对比，整体内存水位持平。

其中：

1）私聊场景下小米9测试结构内存下降40M，功耗降低4mah，CPU降低1%；

2）极限测试场景下新架构内存数据相比于旧架构有一个较为明显的改观（主要由于两个界面都使用Flutter场景下，页面切换的开销降低很多）。

6、未来展望

JS跨端不安全，C++跨端成本有点高，Flutter会是一个较好选择。彼时闲鱼FlutterIM架构升级根本目的从来不是因Flutter而Flutter，是由于历史包袱的繁重，代码层面的维护成本高，新业务的扩展性差，人力配比不协调以及疑难杂症的舆情持续反馈等等因素造成我们不得不去探索新方案。

经过闲鱼IM超复杂业务场景验证Flutter模式的逻辑跨端可行性，闲鱼在Flutter路上会一直保持前沿探索，最后能反馈到生态圈。

总结一句话，探索过程在于你勇于迈出第一步，后面才会不断惊喜发现。

（原文链接：点此进入，本次有修订和改动）

附录：更多文章汇总

[1] 更多阿里团队的文章分享：

《阿里钉钉技术分享：企业级IM王者——钉钉在后端架构上的过人之处》

《现代IM系统中聊天消息的同步和存储方案探讨》

《阿里技术分享：深度揭秘阿里数据库技术方案的10年变迁史》

《阿里技术分享：阿里自研金融级数据库OceanBase的艰辛成长之路》

《来自阿里OpenIM：打造安全可靠即时通讯服务的技术实践分享》

《钉钉——基于IM技术的新一代企业OA平台的技术挑战(视频+PPT) [附件下载]》

《阿里技术结晶：《阿里巴巴Java开发手册(规约)-华山版》[附件下载]》

《重磅发布：《阿里巴巴Android开发手册(规约)》[附件下载]》

《作者谈《阿里巴巴Java开发手册(规约)》背后的故事》

《《阿里巴巴Android开发手册(规约)》背后的故事》

《干了这碗鸡汤：从理发店小弟到阿里P10技术大牛》

《揭秘阿里、腾讯、华为、百度的职级和薪酬体系》

《淘宝技术分享：手淘亿级移动端接入层网关的技术演进之路》

《难得干货，揭秘支付宝的2维码扫码技术优化实践之路》

《淘宝直播技术干货：高清、低延时的实时视频直播技术解密》

《阿里技术分享：电商IM消息平台，在群聊、直播场景下的技术实践》

《阿里技术分享：闲鱼IM基于Flutter的移动端跨端改造实践》

[2] 更多IM开发综合文章：

《新手入门一篇就够：从零开发移动端IM》

《移动端IM开发者必读(一)：通俗易懂，理解移动网络的“弱”和“慢”》

《移动端IM开发者必读(二)：史上最全移动弱网络优化方法总结》

《从客户端的角度来谈谈移动端IM的消息可靠性和送达机制》

《现代移动端网络短连接的优化手段总结：请求速度、弱网适应、安全保障》

《移动端IM中大规模群消息的推送如何保证效率、实时性？》

《移动端IM开发需要面对的技术问题》

《开发IM是自己设计协议用字节流好还是字符流好？》

《IM消息送达保证机制实现(一)：保证在线实时消息的可靠投递》

《IM消息送达保证机制实现(二)：保证离线消息的可靠投递》

《如何保证IM实时消息的“时序性”与“一致性”？》

《一个低成本确保IM消息时序的方法探讨》

《IM单聊和群聊中的在线状态同步应该用“推”还是“拉”？》

《IM群聊消息如此复杂，如何保证不丢不重？》

《谈谈移动端 IM 开发中登录请求的优化》

《移动端IM登录时拉取数据如何作到省流量？》

《浅谈移动端IM的多点登录和消息漫游原理》

《完全自已开发的IM该如何设计“失败重试”机制？》

《通俗易懂：基于集群的移动端IM接入层负载均衡方案分享》

《微信对网络影响的技术试验及分析（论文全文）》

《开源IM工程“蘑菇街TeamTalk”的现状：一场有始无终的开源秀》

《如约而至：微信自用的移动端IM网络层跨平台组件库Mars已正式开源》

《子弹短信光鲜的背后：网易云信首席架构师分享亿级IM平台的技术实践》

《微信技术分享：微信的海量IM聊天消息序列号生成实践（算法原理篇）》

《自已开发IM有那么难吗？手把手教你自撸一个Andriod版简易IM (有源码)》

《融云技术分享：解密融云IM产品的聊天消息ID生成策略》

《IM开发基础知识补课(六)：数据库用NoSQL还是SQL？读这篇就够了！》

《适合新手：从零开发一个IM服务端（基于Netty，有完整源码）》

《拿起键盘就是干：跟我一起徒手开发一套分布式IM系统》

《适合新手：手把手教你用Go快速搭建高性能、可扩展的IM系统(有源码)》

《IM里“附近的人”功能实现原理是什么？如何高效率地实现它？》

《IM“扫一扫”功能很好做？看看微信“扫一扫识物”的完整技术实现》

《IM消息ID技术专题(一)：微信的海量IM聊天消息序列号生成实践（算法原理篇）》

《IM消息ID技术专题(二)：微信的海量IM聊天消息序列号生成实践（容灾方案篇）》

《IM消息ID技术专题(三)：解密融云IM产品的聊天消息ID生成策略》

《IM消息ID技术专题(四)：深度解密美团的分布式ID生成算法》

《IM消息ID技术专题(五)：开源分布式ID生成器UidGenerator的技术实现》

《IM消息ID技术专题(六)：深度解密滴滴的高性能ID生成器(Tinyid)》

《IM开发宝典：史上最全，微信各种功能参数和逻辑规则资料汇总》

《IM开发干货分享：我是如何解决大量离线消息导致客户端卡顿的》

《零基础IM开发入门(一)：什么是IM系统？》

《零基础IM开发入门(二)：什么是IM系统的实时性？》

《零基础IM开发入门(三)：什么是IM系统的可靠性？》

《零基础IM开发入门(四)：什么是IM系统的消息时序一致性？》

《IM开发干货分享：如何优雅的实现大量离线消息的可靠投递》

《IM开发干货分享：有赞移动端IM的组件化SDK架构设计实践》

《一套亿级用户的IM架构技术干货(下篇)：可靠性、有序性、弱网优化等》

《IM扫码登录技术专题(一)：微信的扫码登录功能技术原理调试分析》

《IM扫码登录技术专题(二)：市面主流的扫码登录技术原理调试分析》

《IM扫码登录技术专题(三)：通俗易懂，IM扫码登录功能详细原理一篇就够》

《理解IM消息“可靠性”和“一致性”问题，以及解决方案探讨》

《阿里技术分享：闲鱼IM基于Flutter的移动端跨端改造实践》

更多同类文章 ……

本文已同步发布于“即时通讯技术圈”公众号。

同步发布链接是：

Q5: flutter扫码插件，支持自定义

nan_scan 是一款支持iOS和android 的扫码器插件，支持用户自定义页面

1、配置：

android配置：在AndroidManifest.xml 下添加相机权限 uses-permission android:name="android.permission.CAMERA" /

iOS：在打开xcode，在info.plist 下添加 Privacy - Camera Usage Description ，打开相机权限

2、使用：

引入插件：在pubspec.yaml 中，

    dependencies:

        nan_scan: 版本号

使用案例方法：

或者：

demo效果图：

关于flutter相机下载和flutter官方app的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。