Flutter框架结构

Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图，这无疑能为用户提供良好的体验。

跨平台自绘引擎

Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。相反，Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。
Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API，目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎，值得一提的是，由于Android系统已经内置了Skia，所以Flutter在打包APK(Android应用安装包)时，不需要再将Skia打入APK中，但iOS系统并未内置Skia，所以构建iPA时，也必须将Skia一起打包，这也是为什么Flutter APP的Android安装包比iOS安装包小的主要原因。

Flutter官方框架图

Flutter Framework

这是一个纯 Dart实现的 SDK，它实现了一套基础库，自底向上，我们来简单介绍一下：

底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。
Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。
Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景，只是和这两层打交道。

Flutter Engine

这是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

搭建Flutter开发环境

下面以Windows搭建Flutter环境为例。
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，我们需要先将以下环境变量加入到用户环境变量中。

PUB_HOSTED_URL ： https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL ： https://storage.flutter-io.cn

在这里插入图片描述

获取Flutter SDK

可在官方下载最新的SDK稳定版或测试版本，也可以通过git从Flutter仓库获取相应的版本。
官方下载地址：https://flutter.cn/docs/development/tools/sdk/releases#windows
在这里插入图片描述

Git命令：git clone -b beta https://github.com/flutter/flutter.git

更新 Path 环境变量

将下载或者通过git命令获取的文件夹转移到需要放置的目录中，如 D:\ProgramFiles\Android\Flutter
将该目录中flutter文件夹中带bin的目录如：D:\ProgramFiles\Android\Flutter\flutter\bin 添加至path环境变量中
path
path

运行 flutter doctor 命令

在环境变量更新完后打开CMD或Windows Power Shell 运行 flutter doctor 命令，如果可以运行那么表示安装完毕。
上述命令会检查你的现有环境，然后把检测结果以报告形式呈现出来。仔细阅读它显示的内容，检查是否有尚未安装的软件或是有其他的步骤需要完成。
在这里插入图片描述

搭建Android Studio开发环境

搭建Flutter环境，Android Studio需要有3.0或以后的版本。

安装Flutter及Dart插件

打开Android Studio>Settings>Plugins
搜索Flutter，点击Install，同时Dart插件也会自动安装，如果未自动安装可搜索Dart来进行
PS：安装完成后需要重启Android Studio来加载插件

在这里插入图片描述

创建应用

打开 File>New>New Flutter Project…
选择Flutter Application 然后点击 Next
确认 Flutter SDK 路径区域所示路径是正确的 SDK 路径。如果你还没有安装 SDK，需要先进行安装
输入项目名称，然后点击Next
点击Finish

在这里插入图片描述

创建Flutter项目完毕

运行项目

在这里插入图片描述
选择设备后就可以点击运行按钮。

可点击上图中闪电图标与旁边的按钮来进行热更新或重加载场景
当然也可以在Android Studio 的Terminal中输入flutter run命令运行。。

PS: 如果你是通过命令行运行的项目，你可以在命令行输入r或者大写R进行热更新或重加载场景