Flutter前奏曲

学习Flutter之前要做一些准备工作。Flutter前奏曲包括以下内容：

1.Flutter安装和环境配置

2.VS Code编辑器配置

3.第一个Flutter应用

Flutter安装和环境配置

一、Flutter的下载（以Windows为例）

1.获取flutter，先使用git去克隆远程仓库到本地，按照官方建议，我们选择beta分支

如果没有下载git的话先下载一下，下载并且安装完成后在你想安装的目录下，右击选择 git bash。然后输入

git clone -b beta https://github.com/flutter/flutter.git

就是这样，经过漫长的等待后...（如果第一次失败了，多试两次可能就ok了）

stall success.png

二、安装和环境配置

下载成功后，为了可以在任意的终端会话使用 flutter 命令，你需要添加它到你的 PATH 环境变量：

打开 “控制面板 > 系统和安全 > 系统 > 高级系统设置 > 环境变量”。

1.在用户变量下，检测是否存在 “Path” 的环境变量：
如果这个 Path 变量已经存在了，就添加;到原来的 Path 值的末尾，并且加上 flutter\bin 的全路径。

2.如果这个 Path 变量不存在，就要在用户变量下创建新的 Path 的变量名，并且它的变量值设置为 flutter\bin 的全路径。

envir_setting.png

然后运行下面

注意：Users/didi/google/flutter需要替换为你本地Flutter项目的路径

export PATH=$PATH:/Users/didi/google/flutter/bin

重启 Windows以完全应用此更改。

注意：
为了让Flutter在安装过程中使用国内的镜像。需要声明PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL两个环境变量，执行如下两行命令
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

envir storage.png

envir pub.png

就像这样：

enviroment.png

以上步骤完成后，我们就可以通过flutter doctor命令来执行Flutter的安装程序了，经过一段时间的下载和安装，Flutter会输出安装结果：

注意:
要在命令提示符或者 PowerShell 窗口运行此flutter doctor命令。目前， Flutter 还不支持像 Git Bash 这样子的第三方shell。

fdoctor success.png

第一次运行 flutter 命令（比如 flutter doctor ），它会下载自己的依赖库并且自行编译。后续运行 flutter 命令就会很快了。

VS Code编辑器配置

你可以使用任意一款文本编辑器结合我们提供的命令行工具来构建 Flutter 应用程序。当然，更推荐的是使用我们开发的文本编辑器插件之一，来优化开发的使用体验。支持 Android Studio, IntelliJ 以及 VS Code。

这里使用VS Code编辑器，它包含了运行和调试 Flutter 应用程序的轻量级编辑器。

如果想用Android Studio 点这里传送门

1.安装VS Code
https://code.visualstudio.com/

2.安装Dart Code 插件

（1）执行 View>Command Palette…

（2）在扩展插件安装面板的输入框输入 dart code 关键词，在显示的列表中选择 ‘Dart Code’ 插件，然后点击 Install

（3）点击 ‘OK’ 重新加载 VS Code
3.Flutter Doctor 来验证你的配置

（1）依次执行 View>Command Palette…

（2）输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ 命令

（3）在日志打印窗口的 ‘OUTPUT’ 标签中查看打印出的日志信息，看看有没有报错

VS code dart.png

第一个Flutter应用

前两步都完成后，就可以进行这个激动人心的时刻了，可以运行我们的第一个应用，what？还没写代码呢，运行个毛线？？？

一、安装这个应用程序

启动 VS Code
依次执行 View>Command Palette…
输入 ‘flutter’，选择 ‘Flutter: New Project’ 命令
输入项目名称（例如：myapp），回车
找到一个用于保存项目的目录，然后点击蓝色的确认按钮
项目会自动进行创建，创建完毕之后，main.dart 文件会被自动打开

以上的命令创建了一个名叫 myapp 的 Flutter 项目，并且放在 ‘myapp’ 文件夹中。这是一个很简单的，基于 Material 组件的项目。

在这个项目的文件夹中，和项目业务相关的代码都在 lib/main.dart 中。

mainDart.png

二、运行这个程序

确保在 VS Code 的右下角能看到目标设备的名称
使用键盘上的 F5 按钮，或者依次执行 Debug>Start Debugging
等待应用程序启动
如果一切正常，构建完应用程序之后，你就可以在你的手机或者模拟器上看到应用程序的起始界面了

result1.png

三、尝试一下热重载

Flutter 提供了一种非常高效的开发方式，叫做热重载，这个功能可以在应用程序运行的状态下替换部分代码，并且运行中的程序不会丢失任何状态

举个栗子，我想把屏幕上展现的字符串改一下

VSCode开发编辑器中打开 lib/main.dart 文件
把页面显示的字符串'Learning flutter' 修改为 'I like flutter'
不需要点击 ‘Stop’ 按钮；让应用程序继续运行。只需要将代码全部保存 (cmd-s / ctrl-s)，或者点击热重载按钮（那个绿色的带箭头的转圈图标按钮）你就可以看到你的修改已经被执行了。

result2.png

这个热重载太酷了，这立马就能看到修改效果的体验确实很棒[QAQ]和在Android Studio改动一个小地方后看到效果所要等待的时间没有可比性.....在这个方面，Flutter确实略胜一筹。

这里我们的前奏曲就结束了，过程这样顺下来还是很简单的，但是在实际操作的过程还是会遇到很多小问题的，耐者住寂寞都可以搞定的。毕竟能用耐心解决的问题都不是问题哈。

如果想用Android Studio开发，初体验可以看这个

Flutter 安装和初体验

安装过程填坑可以看这个

Flutter开发环境配置以及踩坑