参考资料：

Flutter 官方文档

Dart 官方文档

2018 年 Flutter 诞⽣，通过 Dart 语⾔构建⼀套跨平台的开发组件，所有组件基于 Skia 引擎⾃绘，在性能上和 Native 平台的 View 相媲美，同时解决了上⼀代架构难以解决的双端⼀致性等问题。引起⼤家⼴泛关注，充分验证了通过绘制构建组件做到 Native View 媲美的 UI 渲染引擎的可⾏性。

一、架构分层

从设计上来看，Flutter 框架是可扩展的、分层的。Flutter 由一系列的单独的依赖包组成，而且这些依赖包依赖底层。上层没有权限访问下层，并且框架层的每个部分都是可插拔的。

图片.png 对于底层的操作系统来说，Flutter 应用被打成的应用包和其他的 Native 应用是一样。平台特定的嵌入层提供了一个入口：协调底层操作系统来访问一些底层的服务，比如渲染桌面、可访问性、输入等，管理事件循环。这个嵌入层是被特定的平台语言开发的，Android 系统是 Java 和 C++，iOS 和 macOS 系统是 Objective-C/Objective-C++，Windows 和 Linux 系统是 C++。正是由于这一层的存在，Flutter 代码可以集成进已经存在的应用，也可以直接使用 Flutter 代码打包整个应用。Flutter 为通用的平台提供了一些嵌入器，其他的嵌入器也是存在的。

Flutter 的核心是 Flutter engine，engine 是 C++ 开发的，并且 Flutter 应用提供最原始的支持，比如协议、通道等等。当新的一帧需要被绘制的时候，Flutter engine 就会栅格化代码合成的绘制信息。Engine 也为上层封装了访问底层的 API：图形图像化、文本布局、文件和网络 I/O、访问性支持、插件架构、Dart运行时、Dart编译工具链等等。

Flutter engine 暴漏是通过 dart:ui 这个库来暴漏给上一层的，这个库用 Dart 类包装了底层的 C++ 代码。像上面说的 engine 的功能，这个库包含了驱动输入、图形化、文本渲染系统等功能。

Typically, developers interact with Flutter through the Flutter framework, which provides a modern, reactive framework written in the Dart language. It includes a rich set of platform, layout, and foundational libraries, composed of a series of layers. Working from the bottom to the top, we have: 一般来说，开发者通过 Flutter framework 来和 Flutter 交互，这一层是 Dart 代码，提供了现代的、响应式的 Flutter 框架。这一层包括了和平台、布局、基础相关的库，并且也是分层的，自底向上以次有：

必要的基础类以及常用的底层代码块的抽象，比如动画、绘制和手势。
处理布局的rendering layer，在这一层，可以构建一棵渲染对象的节点树，你也可以动态的操作这些节点，那么布局就会自动响应你的改变。
合成抽象的 widgets layer，渲染层的每一个渲染对象在 Widget 层都会有一个 Widget 对象与之对应。另外，在这一层开发者也可以定义一些可以复用的组合类，就是这这一层引入了响应式框架。
[Material] 和 [Cupertino] 库，提供了全套的 Material和 iOS 风格的原始组件。

Flutter 框架是相对来说比较小的，一些开发者用到的高级功能大多是以包的形式实现的，比如像 camera 和 webview 这样的平台插件，像 characters、http、animations 这样的平台无关的包，平台无关的包可以完全依赖 Dart 和 Flutter依赖。这些高级包有一些是生态共建的，比如支付、苹果证书、动画等等。

二、安装

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.
工具: Flutter 依赖下面这些命令行工具.
- bash, mkdir, rm, git, curl, unzip, which

1. 获取Flutter SDK

去flutter官网下载其最新可用的安装包，转到下载页。

2. 解压、安装

解压安装包到你想安装的目录；打开终端进行命令操作

cd ~/development
unzip ~/Downloads/flutter_macos_2.10.4-stable.zip

3. 配置环境变量

进入用户的根目录；创建.bash_profile

touch .bash_profile

编辑.bash_profile

open -e .bash_profile

在.bash_profile文件中输入

//镜像：
//国内用户需要设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

//flutter/bin路径 （自行根据安装路径调整）
export PATH=/Users/apple/development/flutter/bin:$PATH

保存后，更新环境变量文件

source .bash_profile

验证

echo $PATH

如果此时有出现类似/xxx/xxx/flutter/bin ，证明环境变量更新成功，可以在任意窗口使用flutter命令，但此时要注意一点: 如果你使用的是zsh，关闭终端，重新启动终端时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc 这样关闭终端再次启动时，~/.bash_profile 就会被再次加载。修改方法：echo 'source ~/.bash_profile' >> ~/.zshrc。

三、平台配置运行项目

1. 设置iOS开发环境

安装Xcode工具，配置 Xcode 命令行工具以使用新安装的 Xcode 版本。从命令行中运行以下命令:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

运行一次 Xcode 或者通过输入命令 sudo xcodebuild -license 来确保已经同意 Xcode 的许可协议。

2. 设置vsCode开发环境

安装Visual Studio Code工具，安装 Flutter 插件

图片.png

在vscode中，快捷键ctrl+shift+P，输入flutter，选择Flutter:New project 创建项目。
按 F5 键或调用Debug>Start Debugging

3. 使用模拟器运行

选择已安装的模拟器图片.png

Flutter 入门 环境配置