Flutter 学习之旅之 flutter 简单介绍和基础环境搭建的简单整理

一、简单介绍

二、Flutter 开发配置要求

三、Flutter SDK 下载

四、更新环境变量

五、Android Studio 下载安装

六、在 Android 中安装 Flutter 和 Dart 插件

七、创建第一个 Flutter 工程

参考博文：

一、简单介绍

Flutter 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，Flutter 是什么，以及开发环境搭建，这里做简单整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。 [5] Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。Flutter已推出稳定的2.0版本。

中文官网：Flutter: 为所有屏幕创造精彩 - Flutter 中文开发者网站 - Flutter

Flutter优点

A、混合开发中，最接近原生开发的框架；

B、性能强大，流畅；

C、优秀的路由设计；

D、优秀的动画设计；

E、简单易学，Dart语言更具优势；

F、跨多种平台，减少开发成本；支持插件，可以访问原生系统的调用。

Flutter缺点

A、脱离不开原生，开发人员需要具备原生（Android、iOS）基础开发能力；

B、适配问题，开发工具版本升级后，修改量大；

C、原生集成第三方SDK后，兼容性适配是个令人头痛的问题；

D、代码可读性较差，对代码质量和管理要求较高；

E、Widget的类型难以选择，糟糕的UI控件API；

F、Flutter packages和Dart packages上第三方sdk繁杂，适配性差，不可乱用；

G、目前几乎没有第三方开发者平台开发Flutter能力的SDK，需要原生去集成；

H、打包后，apk/ipa要大很多。

几种跨平台方案：

1、cordova为例的web应用（微信小程序）

2、原生绘制，如rn、weex

JavaScript通过 bridge 传递到native完成原生绘制， UI的渲染是很频繁的，要使UI不卡顿，必须达到60Fps。但是桥接会花一定的时间。所以这样的架构有时候会有性能问题。

3、Flutter

使用底层引擎渲染视图：Skia，省去了转换为原生控件的流程

跨端对比：（RN和Flutter，数据来自闲鱼）
1、Flutter在低端和中端的iOS机型上，FPS的表现都优于RN
2、CPU方面，Flutter在低端机上表现差于RN，中端优于RN
3、内存方面，低端机Flutter和RN表现几乎一致，但是中端机型上会多余30MB的内存（分析为Dart VM的内存）

Flutter 框架

跨平台应用的框架，没有使用WebView或者系统平台自带的控件，使用自身的高性能渲染引擎(Skia)自绘，
界面开发语言使用dart，底层渲染引擎使用C, C++
组合大于继承，控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量

Widget介绍

一棵完整的Widget树

在 Flutter 体系结构中，真正做组件渲染在屏幕上这个任务的并非在控件层（Widget）层，而是在渲染（Rendering）层。Flutter 中又引入了 Element 树和 RenderingObject 树两棵树。

Widget 是应用界面的声明信息。Widget树实际上是一个配置树，Widget一般来说是不可变的immutable
Element 链接 Widget 和 RenderObject，管理界面的更新和修改。
RenderObject 保存具体的布局信息，负责绘制 UI。

1）更新树：
为什么widget都是immutable？
flutter界面开发是一种响应式编程，主张simple is fast，flutter设计的初衷希望数据变更时发送通知到对应的可变更节点（可能是一个StatefullWidget子节点,也可以是rootWidget）,由上到下重新create widget树进行刷新，这种思路比较简单，不用关心数据变更会影响到哪些节点。

2）widget重新创建，element树和renderObject树是否也重新创建？
widget只是一个配置数据结构，创建是非常轻量的，加上flutter团队对widget的创建/销毁做了优化，不用担心整个widget树重新创建所带来的性能问题，但是renderobject就不一样了，renderobject涉及到layout、paint等复杂操作，是一个真正渲染的view，整个view 树重新创建开销就比较大，所以答案是否定的。

3）树的更新规则：
找到widget对应的element节点，设置element为dirty，触发drawframe, drawframe会调用element的performRebuild()进行树重建
widget.build() == null, deactive element.child,删除子树，流程结束
element.child.widget == NULL, mount 的新子树，流程结束
element.child.widget == widget.build() 无需重建，否则进入流程5
Widget.canUpdate(element.child.widget, newWidget) == true，更新child的slot，element.child.update(newWidget)(如果child还有子节点，则递归上面的流程进行子树更新),流程结束，否则转6
Widget.canUpdate(element.child.widget, newWidget) ！= true（widget的classtype 或者 key 不相等），deactivew element.child，mount 新子树

4）如何触发树更新：
全局更新：调用runApp(rootWidget)，一般flutter启动时调用后不再会调用
局部子树更新, 将该子树做StatefullWidget的一个子widget，并创建对应的State类实例，通过调用state.setState() 触发该子树的刷新

数据传输

Flutter定义了三种不同类型的Channel，它们分别是

BasicMessageChannel：用于传递字符串和半结构化的信息。
MethodChannel：用于传递方法调用（method invocation）。
EventChannel: 用于数据流（event streams）的通信。
三种Channel之间互相独立，各有用途，但它们在设计上却非常相近。每种Channel均有三个重要成员变量：

name: String类型，代表Channel的名字，也是其唯一标识符。
messager：BinaryMessenger类型，代表消息信使，是消息的发送与接收的工具。
codec: MessageCodec类型或MethodCodec类型，代表消息的编解码器。

二、Flutter 开发配置要求

这里以 Windows 为例

要想安装和运行 Flutter，你的开发环境至少应该满足如下的需求：

操作系统：Windows 10 或更高的版本（基于 x86-64 的 64 位操作系统）。
磁盘空间：除安装 IDE 和一些工具之外还应有至少 1.64 GB 的空间。
设置: 必须在 Windows 10/11 上启用开发者模式。
工具：要让 Flutter 在你的开发环境中正常使用，依赖于以下的工具：
- Windows PowerShell 5.0 或者更高的版本（Windows 10 中已预装）
- Git for Windows 2.x，并且勾选从 Windows 命令提示符使用 Git 选项。
  
  如果 Windows 版的 Git 已经安装过了，那么请确保能从命令提示符或者 PowerShell 中直接执行 git 命令。

三、Flutter SDK 下载

各个版本下载地址：Flutter SDK 版本列表 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

1、下载SDK 包，然后解压

2、把 Flutter SDK 最好放在非 C 盘位置

注意：

1）请勿将 Flutter 有特殊字符或空格的路径下

2）请勿将 Flutter 安装在需要高权限的文件夹内，例如 C:\Program Files\

3、进入 flutter文件，找到 flutter_console.bat，双击运行如下

3、安装了 git ，也可以使用 git 进行下载

如果你不想安装指定版本的安装包。可以忽略步骤 1 和 2。从 GitHub 上的 Flutter repo 获取源代码，并根据需要，切换到指定的分支或标签。例如：

D:\src>git clone https://github.com/flutter/flutter.git -b stable

四、更新环境变量

0、以 windows 10 为例，计算机右键属性，打开高级系统设置，进入环境变量，进行设置环境变量

1、在中国网络环境下使用 Flutter，为 Flutter 设定镜像配置

如果你在国内使用 Flutter，那么你可能需要找一个与官方同步的可信的镜像站点，帮助你的 Flutter 命令行工具到该镜像站点下载其所需的资源。你需要为此设置两个环境变量：PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL，然后再运行 Flutter 命令行工具。

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

具体可以参考：在中国网络环境下使用 Flutter - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

2、在 Path 中配置 flutter/bin 全路径，以便 Windows 控制台中运行 Flutter 命令

3、确定保存设置，打开新的控制台，输入 flutter doctor，会显示 flutter 是否安装完成

五、Android Studio 下载安装

1、Android Studio 下载

官网：Download Android Studio and SDK tools | Android Developers

2、安装Android Studio ，运行 Android Studio，并进入 ‘Android Studio Setup Wizard’，这会安装最新的 Android SDK， Android SDK Platform-Tools 以及 Android SDK Build-Tools，这些都是在开发 Android Flutter 应用时所需要的。