3.1　开发环境搭建

支持Flutter 开发的IDE 有很多，比如Android Studio、Visual Studio Code（VSCode）、InteIIiJ IDEA、Atom、Komodo 等。本节将讲解Android Studio 和VSCode。Android Studio 和VSCode各有优缺点：Android Studio 是Google 官方推荐的开发工具，自带很多强大功能及模拟器；VSCode 则更加轻量级、占用资源少。

关于模拟器，这里推荐使用Android 官方模拟器，即Android Studio 里自带的模拟器。我们可以单独启动模拟器，无须从Android Studio 中启动，当然也可以用真机运行调试。

接下来，我们开始搭建Flutter 开发环境。说明一下，本书是在Windows 环境下搭建开发环境的。

3.1.1　Android Studio 开发环境的搭建

本节将介绍在官方推荐的开发工具Android Studio 下搭建开发环境的流程。

Flutter SDK 的下载与环境变量配置

截止到本书写作之时，Flutter SDK 的官方最新推荐版本是1.17 版本，我们可以在官方网站下载最新版本的SDK，如图3-1 所示。

Flutter SDK 的官方GitHub 上主要有dev、beta 和stable 三个分支，正式开发时可以下载stable稳定版本，命令如下。

下载完Flutter SDK，我们可以把它解压并存入指定文件夹，然后配置SDK 环境变量。将Flutter 的bin 目录加入环境变量，命令如下。这样一来，环境变量将配置完成。

接下来在命令提示符窗口输入如下命令，检查是否配置成功。

如果有相关的错误提示，根据提示进行修复即可。每次运行这个命令都会检查是否缺失了必要的依赖。如果配置全都正确，会出现如图3-2 所示的Flutter 配置检查界面，主要的检查信息有Flutter、Android toolchain、Connected device、开发工具IDE。

Flutter 和Dart 插件安装与项目新建

Android Studio 的安装很简单，下载相应的安装包后按步骤操作即可，这里不做详细讲解。Android Studio 安装完成后，我们启动它来安装Flutter 和Dart 插件。

这里使用的是Android Studio 3.3.1 版本，大家也可以使用3.4 及以上版本。我们打开Android Studio，选择【File】 ，然后选择【Settings】 ，在【Plugins】下搜索Flutter 和Dart 插件进行安装，如图3-3 所示。

安装好插件后重启Android Studio，这样一来，基本环境就搭建好了。接下来我们选择【File】，然后依次选择【New】和【New Flutter Project】，这样就可以新建Flutter 项目了，如图3-4 所示。

经过以上步骤，会弹出新建Flutter 项目的选择界面，此时选择【Flutter Application】并选择【Next】，完成项目选择，进入配置项目界面。根据提示连续选择【Next】，完成项目配置、包名信息填充。设置好所有信息后，选择【Finish】就可以完成项目新建了。

Flutter 项目结构如图3-5 所示。

3.1.2　VSCode 开发环境的搭建

VSCode 相对于Android Studio 而言是一个比较轻量级的开发工具，大家可以根据自己的习惯来选择开发工具。接下来我们介绍VSCode 开发环境的搭建流程。

下载Flutter SDK

Flutter SDK 由两部分构成，一部分是Dart SDK，另一部分是Flutter SDK。可以通过两种方式下载Flutter SDK，一种是通过GitHub 下载，另一种是直接下载SDK 压缩包。

通过GitHub 下载时，我们可以拉取官方GitHub 上的Flutter 分支。官方分支主要有dev、beta 和stable 三个，要想进行正式开发，建议下载stable 稳定版本，命令如下。

另一种方式是直接在官网下载SDK 压缩包，前面已经讲过，这里就不重复介绍了。

环境变量配置

关于环境变量配置，VSCode 和Android Studio 是一样的，这里不再赘述。

安装VSCode 所需的插件

我们需要在VSCode 的Extensions 里搜索并安装Dart 和Flutter 的扩展插件，如图3-6 所示。安装完成后，重启VSCode 编辑器即可完成环境搭建。

新建Flutter 项目

新建Flutter 项目时，我们可以直接打开命令面板，或通过组合键Ctrl+Shift+P 打开命令面板，找到【Flutter：New Project】，如图3-7 所示。

然后完善内容，输入项目名称，选择项目存储位置，这样就完成了Flutter 项目的新建。新建完毕的Flutter 项目结构如图3-8 所示。

其中，与Android 相关的修改和配置项位于android 目录下，其结构与Android 应用的项目结构一致；与iOS 相关的修改和配置项位于ios 目录下，结构与iOS 应用的项目结构一致。最重要的Flutter 代码文件存于lib 目录下，类文件以.dart 结尾。

3.1.3　模拟器的新建与调试

项目新建完毕，接下来就要进行编译，并将Flutter 项目运行到真机或模拟器上了。首先我们介绍如何在Android Studio 中新建模拟器。

选择Android Studio 顶部的【Android Virtual Device Manager】，如图3-9 所示，这样即可完成模拟器的新建。

如果我们不想从Android Studio 的Android Virtual Device Manager 里新建和管理模拟器，也可以在Android SDK目录下的emulator文件夹里找到emulator.exe文件，从而启动Android Virtual Device Manager。

我们可以建立一个emulator.bat 文件并写入启动模拟器的命令，这样一来，每次启动模拟器时只要直接运行这个emulator.bat 文件即可，如图3-10 所示。

用鼠标左键双击emulator.bat 文件，运行模拟器，此时界面如图3-11 所示。

接着在项目所在目录运行flutter run 命令，启动模拟器日志，将Flutter 项目在模拟器上编译运行，如图3-12 所示。

运行效果如图3-13 所示。

在开发环境下可以进行项目的热重载（Hot Reload）和热重启（Hot Restart），操作非常方便。如图3-14 所示，闪电形状的图标为热重载按钮，它右侧的环形带闪电的图标为热重启按钮。

Flutter 项目运行成功后，只要不退出应用界面，就可以进行热重载。输入r 会热重载当前页面，输入R 将进行整个应用的热重启，输入h 弹出帮助信息，输入d 解除关联，输入q 退出应用调试。

如果遇到有多个模拟器，或模拟器和真机同时存在的情况，可以通过“-d 参数+设备ID”的形式指定要运行的设备，命令如下。

真机设备运行调试和模拟器运行调试的过程基本一致，将手机和电脑通过USB 连接，手机开启开发人员选项和USB 调试，最后运行flutter run 命令即可。下面列出几个常用的命令，大家要牢记这些命令，并在开发过程中熟练使用它们。

关于开发环境搭建和模拟器配置的内容就介绍这么多，建议大家使用稳定版Flutter SDK，尝试新建一个项目并将它运行到手机或模拟器上，做到熟练上手。