flutter软件大小,flutter性能如何

flutter 常见问题之app体积为何比较大

细心的开发者会发现flutter构建的App体积比native的大一些，是什么原因造成App体积大呢？

其实flutter 在release时App体积和native的大小差不多，而debug时体积通常会大。debug版本体积较大是为了Hot reload和快速编译。如果有flutter开发经验的朋友都体验过，如果您修改一下App的背景颜色，只需save一下就可以立刻看到修改后效果。我称之为“像艺术家一样在创造App”，因此为了实现这些目标，提高开发的效率，debug将占用全部资源。而当我们构建release版时，flutter又会采用AOT策略，提高App运行效率，release版只打包必需的资源，因而体积又会减少。

另外，flutter团队也一直在寻找减小程序大小的方法。

Flutter实践--屏幕适配

做移动端开发的小伙伴都知道，针对不同型号和尺寸的手机要进行页面适配，且Android和iOS适配方案各不相同，那flutter端如何进行适配呢？以下为近期flutter开发过程中关于适配的一些学习和记录~~~~

说到flutter屏幕适配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不说以下几点?

   默认宽1080px

   默认高1920px

   allowFontScaling为false，即不跟随系统字体大小设置变化

   初始化单位为px

需要把context传进去，因为内部是通过 MediaQuery 来获取屏幕尺寸等相关信息的

无需再传context，因为内部是通过单例 window 来获取屏幕尺寸等相关信息的

作为iOS开发，之前都是以pt为参照进行比例适配的，且架构组已经定义了一套适配相关常量，传px进去不太方便，所以需要对flutter_screenutil进行扩展

公司设计图是以iPhone X的尺寸提供的即物理设备尺寸为375x812，像素比例为750x1624,像素密度比为2

初始化仍用px来初始化

dart sdk 2.7正式支持 extension-method ，即为已有类扩展方法，从 flutter_screenutil 这种 540.w 写法点进去，我们可以看到

flutter_screenutil为num类扩展了一系列简写方法，那我们当然可以按照它这种方式进行扩展

网上提供的解决方案：

第一步：修改 pubspec.yaml

第二步：执行 flutter pub get

第三步：重启 AndroidStudio

解决方案：去掉const即可

UI设计中px、pt、ppi、dpi、dp、sp之间的关系

Dart/Flutter - 扩展方法(ExtensionMethod)

Flutter开发Windows 和 Linux 桌面应用，设置默认窗口大小

在用Flutter 开发windows和linux跨平台应用的时候，如何设置默认窗口大小呢？

flutter没有提供统一的api，所以默认的窗口大小是1280x720.

如果我们想要改成自己想要的默认窗口大小呢？比如我想要设置为：512像素宽, 926像素高

我该怎么做呢？

请看我的教程。

首先你确保你已经为项目创建了windows和Linux的支持。

目前Flutter 为windows和linux提供的是托管式运行的主程序，可以理解为一个壳子，这个壳子就是用cpp写的，平台原生的window 窗口。

所以我们可以打开相应的cpp源代码，设置默认窗口大小。

这里先讲windows和linux，因为mac 平台跟windows和linux不一样，后面单独给大家讲解。

我们看图。

源代码路径位于：

windows/runner/main.cpp

找到

第一个参数是宽度，单位是px，第二个是高度，单位是px

修改后重新运行生效。

源代码路径位于：

linux/my_application.cc

找到

方法的第一个数字是宽度，第二个是高度，单位也是px像素。

修改后，重新运行生效。

现在，你已经学会了如何设置初始窗口大小了。

Flutter是一个什么框架

Flutter是一个移动应用程序的软件开发工具包（SDK），具有以下特征：

跨平台应用的框架，没有使用WebView或者系统平台自带的控件，使用自身的高性能渲染引擎自绘

简化版的浏览器，最大限度在android和ios上统一UI，包括业务逻辑和用户体验

开发语言使用dart，结合C, C++, 和Skia（2D渲染引擎）构建

支持hot reload，包含着完整的控件和工具链

一切皆控件，控件是每个Flutter应用程序的基本构建块，与分离视图、控制器、布局和其他属性的框架不同，Flutter具有一致的统一对象模型：控件。一个控件可以定义：结构元素（比如按钮或菜单）、风格元素（比如字体或颜色方案）、布局的方面（比如填充）、一些业务逻辑等

组合大于继承，控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量

强化版的WebView，框架仅提供一个View层，大部分功能要依赖原生

目前只能够运行大部分Dart代码（不能引入dart:mirrors或dart:html库）

Flutter 屏幕适配 -- 百分比

本文是根据 Daniele Cambi 的文章 Flutter — Effectively scale UI according to different screen sizes 总结而来 ：

文章地址 ： （自备扶梯）

本文核心思想 ：

作者创建一个矩形 ：

在iPhone 5s (4" Display) and on an iPhone XS Max (6,46" Display)，

显示效果的差异 ！！！ 如何解决这个问题呢 ？

注： Flutter 使用的 逻辑像素 logical pixels 为单位 ，和 Android的 dp还是不一样

具体 lp 有什么效果，网上也没查到具体资料?

如何解决这个问题呢 ？

作者认为可以把屏幕认为是一个 ， 100 * 100 的格子（或者认为水平方向和竖直方向，平均分成100个单位 ，恩 ，是不是就是Android中的百分比布局了）

作者新建一个帮助类 ：

初始化方法 ：

使用帮助类来设置widget大小 ：

效果图 ：

在Flutter中有一个非常方便的小部件，可以有效地处理这些问题，它被称为“安全区域”( SafeArea)。

个人理解，flutter , 把 异形屏 ，导航栏相关区域称为 安全区域 。

作者的思想 ：屏幕的长宽去掉安全区域的大小，然后分成 100份 ，算出每一块的单位长度 。

我们可以使用 SizeConfig.safeBlockHorizontal or SizeConfig.safeBlockVertical为单位 ，对文字进行缩放 。

真实的软件开发过程，一般是设计人员先设计好设计图 or 设计稿（一般是1080px * 1920px为基准），然后研发人员进行开发

那我们就把屏幕宽和长 ，分成 1080 和 1920 个单位 ，然后按设计图上的标注去填写相应widgets的大小

所以我认为 flutter 非常适合百分比布局（天生适合按比例布局）

而Android 百分比布局，适配工作量非常大，兼容性差

在网上发现了一个开源库 ，原理我觉得差不多，大家可以学习一下

flutter_screenutil

如果觉得文章有用，帮忙点个喜欢❤️ ，???

基于Weex的Flutter项目框架

最近在做的一个项目，项目的前期采用Weex开发。但是随着交互复杂度的增加，Weex一处开发多处多处运行的特征并没有很好的体现，相反很多时候我们还是需要做IOS和Android的适配。如今火热的Flutter相比Weex和Rn来说，给出了更好的跨平台解决方案。所以我们设计了一套基于Weex实现，底层跑在Flutter Engine上的框架。

 底层的Runtime采用isolate engine,框架业务逻辑，Dom的解析逻辑和Render逻辑都跑在这里。

 渲染引擎采用Flutter的Skia，彻底剥离了Android和IOS的差异性.

    将Weex VirsualDom的解析都替换成Flutter Widget.

    设计基于Weex2Dart的Brider,使JS和Dart可以相互调用

    weex-demo的性能展示

release环境下采用AOT模式，性能会有质的飞跃。

Android-Release版本只有10m大小

相比Weex和Rn具有更好的性能，同时具有更好的跨平台性

相比Flutter，具有动态部署的能力（Flutter Release采用AoT模式并没有动态部署的能力，即使Debug版本也只是开发环境下才有动态化能力并没有可以实施项目的能力）

只需要会Weex开发或则Rn开发就可以，不需要额外学习Dart，已有的Weex项目可以无缝切换。