Android Studio以及VS Code 的 Flutter开发环境搭建以及简单用法

Flutter

• Flutter框架结构
• 跨平台自绘引擎
• Flutter Framework
• Flutter Engine
• 搭建Flutter开发环境
• 获取Flutter SDK
• 更新 Path 环境变量
• 运行 flutter doctor 命令
• 搭建Android Studio开发环境
• 安装Flutter及Dart插件
• 创建应用
• 运行项目
• 搭建VS Code开发环境
• 安装Flutter及Dart插件
• 通过 Flutter Doctor 命令验证是否安装成功

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 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环境变量中

运行 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来加载插件

创建应用

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

创建Flutter项目完毕

运行项目

选择设备后就可以点击运行按钮。

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


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

搭建VS Code开发环境

安装Flutter及Dart插件

首先安装VS Code
安装完毕后点击左侧扩展面板 快捷键: ctrl+shift+x

搜索Flutter和Dart进行安装。


插件安装完毕后重启VS Code。

通过 Flutter Doctor 命令验证是否安装成功

1. 打开 查看 > 命令面板…快捷键：ctrl+shift+p。
2. 输入 “doctor”，选择 Flutter: Run Flutter Doctor。
3. 打开 输出 面板查看是否有错误。