1.2 环境搭建

Flutter环境搭建首先需要安装JDK，然后需要下载Flutter SDK，接着下载VSCode和Android Studio，Flutter开发采用的主流IDE为Android Studio或者VSCode。这里介绍两种IDE的配置方法，接着需要安装IDE插件，最后运行调试模拟器。

首先，下载JDK 8（最好不要下载JDK 15版本，版本太高会出现Bug），下载地址：https://www.oracle.com/java/technologies/javase-downloads.html，然后配置JDK环境变量，这里不再介绍。

1.2.1 下载Flutter SDK

官网下载地址https://flutter.dev/docs/get-started/install，官方提供的网址下载速度很慢，也可到Flutter中国镜像网站https://flutter.dev/community/china下载，如图1-1所示。

为了访问Flutter相关官网资源更加快捷，Flutter官方为中国开发者搭建了临时镜像，可以将如下环境变量加入到用户环境变量。

在Windows中加入环境变量如图1-2所示。

下载完Flutter SDK，将压缩包放置在一个开发项目的目录下，然后解压缩，将Flutter SDK目录下的bin文件加入到环境变量Path下，具体如图1-3所示。

打开终端控制台，在控制台输入flutter，如果出现Flutter的命令提示信息，就说明Flutter安装成功。运行结果如图1-4所示。

1.2.2 IDE的下载

下面分别介绍Android Studio和VSCode两种IDE（集成开发环境），实际开发可以任选其一进行安装。

1.Android Studio配置

1）下载和安装Android Studio，官网下载地址https://developer.android.google.cn/studio/。本书下载Android Studio 3.6版本。

2）下载Android SDK。下载最新版本的Android SDK，建议安装相关SDK，也可选择最新SDK安装。由于SDK占用磁盘空间较大，一般会占据十几GB磁盘空间，请合理分配空间。如图1-5所示。

3）下载最新版本的AVD（Android Virtual Device）下载和安装AVD，官网下载地址https://code.visualstudio.com/。首先单击添加工具栏上的AVD Manager。弹出添加虚拟机界面，单击“添加虚拟机”按钮。如图1-6所示。

选择虚拟机硬件，单击“Next”按钮，如图1-7所示。

选择要下载的虚拟机镜像，选择虚拟机API版本和平台，单击Next按钮，如图1-8所示。

下载完成后单击Finish按钮，就可以完成虚拟机的安装。安装成功后，在图1-6中就可以看到安装好的模拟器，单击启动按钮，虚拟机即可启动。

2.VSCode配置

下载和安装VSCode，官网下载地址https://code.visualstudio.com/。安装完成VSCode后，对VSCode进行插件安装。打开VSCode，单击安装插件对话框，在搜索栏中输入flutter，单击Install按钮（图中箭头所指），具体如图1-9和图1-10所示，Flutter开发最基本需要安装Flutter和Dart，但同时建议按照图1-10再安装其他几个插件，提高开发效率。例如：Flutter Widget Snippets可以提供Widget代码片段；Awesome Flutter Snippets提供常用函数的代码片段等。

1.2.3 安装插件

下面介绍Android Studio的Flutter插件安装。单击菜单栏的File→Settings选项，然后搜索plugin，在plugins下安装的Marketplace中搜索flutter，安装Flutter，一般也会自动安装Dart，如果没有安装Dart，还需要安装Dart插件。如图1-11所示。

1.2.4 测试环境

1.flutter doctor测试环境

在控制台输入flutter doctor测试环境，运行测试命令来查看是否还需要安装其他依赖，如果需要则安装它们，显示测试结果如图1-12所示。

2.VSCode下创建项目

1）首先在本地创建一个文件夹，用来保存项目文件。

2）打开VSCode，单击菜单栏的File选项，再单击Open Folder...按钮，然后选择刚才创建的文件夹。

3）打开IDE的终端（Terminal），进入刚才打开的文件夹路径，可以利用以下命令，如图1-13所示。

输入上述命令后按〈Enter〉键，IDE就会自动构建Flutter项目，构建项目过程如图1-13所示。

4）构建Flutter项目完成后，打开项目根目录的lib文件夹下的main.dart文件，就可以看到项目入口代码文件，如图1-14所示。

5）进入项目目录，确保模拟器打开，如果没有打开模拟器，可在Android Studio中先启动模拟器，最后输入flutter run，运行项目。如图1-15所示。

6）第一次运行项目速度会比较慢，需要耐心等待几分钟，成功运行后，运行结果如图1-16所示。

在VSCode的Terminal中有三个快捷键是经常使用的：

1）P键：切换模拟器中是否加入网格。

2）R键：热启动（配合保存〈Ctrl+S〉使用，一般每次改变代码，只需先保存，然后切换到Terminal区域，再单击R（大写），即可重新启动模拟器，刷新模拟器页面）。

3）O键，切换iOS和Android系统。

3.Android Studio下创建项目

1）单击Android Studio工具栏中的File→New→New Flutter Project...，新建一个Flutter Project，如图1-17所示。

2）选择Flutter Application，然后单击Next按钮，分别输入项目名称、Flutter SDK路径、项目存放路径，然后单击Next按钮，如图1-18所示。

3）选择Package name填入项目的包名，然后单击Finish按钮，完成Flutter项目创建，如图1-19所示。

4）选择Android Studio上侧工具栏下的快捷按钮，选择模拟器，然后单击右侧的项目运行按钮，如图1-20所示。

5）最后，运行结果如图1-21所示。