1.4 配置Flutter开发环境

Flutter SDK配置完成后，还需要配置编程环境，在Flutter中可选择多种编程环境，比如功能强大的Android Studio IDE，以及轻量快速的Visual Studio Code编辑器。除此之外，还有在线Flutter编辑器，可以随时进行编程练习，非常方便。下面将分别进行介绍。

1.4.1 使用Android Studio进行Flutter开发

Android Studio是由Google推出的官方Android开发IDE，专门用于An-droid原生开发。安装官方推出的Flutter插件之后，Android Studio便具备了Flutter开发能力，变身为一款强大的Flutter开发IDE。

Android Studio底层基于JetBrains的Intellij IDE二次封装，这是一款功能强大的IDE，尤其是在开发复杂的商业项目时，它的开发与重构能力非常强大。安装Flutter插件后，Android Stu-dio全面整合了Flutter开发相关功能，包括代码提示、调试运行、重构等，对于复杂Flutter项目来说选择使用Android Studio进行开发也是绝佳选择。

1 Android Studio安装Flutter插件

Android Studio支持Windows、macOS、Linux多平台，其官方网址为https://developer.an-droid.com/studio，打开网页后可根据自身平台进行下载安装。

安装完成后运行Android Studio，会进入欢迎界面，如图1-11所示。

从图1-11中可以看到，有一个Start a new Flutter project按钮，用于创建Flutter工程。未安装Flutter插件的Android Studio是没有这个按钮的，由于作者已经安装了Flutter插件，因此这个按钮才会出现。

下面介绍如何安装Flutter插件。单击右下角的Configure按钮，选择Plugins，在打开的Plugins窗口中，选择Marketplace，并搜索flutter关键字，在搜索结果中找到Flutter组件并进行安装，如图1-12所示。插件安装完成后会提示重启IDE，单击重启IDE按钮，再次启动时即可看到Start a new Flutter project按钮。

安装完Flutter插件后，使用Android Studio进行Flutter开发的效果如图1-13所示。从图中可以看到Android Studio的功能非常强大，Flutter插件对Android Studio进行了全面定制，提供了许多Flutter专属功能，能够进一步提高开发效率。

2 Android Studio安装Android SDK

用Flutter开发Android应用，需要安装Android SDK。在Android Studio中可以方便地管理和安装不同版本的Android SDK。

在Android Studio欢迎界面中，单击Configure按钮，在弹出菜单中选择SDK Manager会弹出设置窗口，在窗口中可勾选所需的Android SDK版本进行安装，具体如图1-14所示。

除了在Android Studio的欢迎界面打开SDK Manager之外，还可以进入IDE主界面中，从工具栏上进行访问，或者通过设置菜单进行访问。

1.4.2 使用Visual Studio Code进行Flutter开发

Visual Studio Code是目前最为流行的代码编辑器之一，Flutter也支持使用它进行开发，同样也是基于插件扩展实现。下面介绍如何为Visual Studio Code添加Flutter支持。

首先打开Visual Studio Code，在左侧打开扩展Tab，在搜索框中输入flutter关键字，选择Flutter插件并安装，具体如图1-15所示。

Visual Studio Code的Flutter插件也带来了Flutter开发功能深度整合，包括代码提示、编译运行、代码重构等。Visual Studio Code也是实际工作中常用的Flutter开发工具，并且具备占用资源少的优点。

使用Visual Studio Code进行Flutter开发的实际效果如图1-16所示。从图中可以看出，Visual Studio Code的界面相较于Android Studio要简洁许多，这并不意味开发功能弱，实际上它的Flutter开发能力也是非常强大的。

1.4.3 使用在线环境进行Flutter开发

除了本地开发环境之外，还有一些在线开发环境，虽然功能有限，但对于熟悉Dart语言特性，快速验证一些简单的Flutter布局还是非常好用的。

首先介绍Dart在线运行环境，其网址为https://dart.dev/#try-dart，打开后页面分为两个部分，左侧为代码编辑器，可以输入Dart代码，右侧为运行按钮和命令行输出，用于执行代码并打印结果。网页的运行效果如图1-17所示。

接下来介绍Flutter在线运行环境，网址为https://dartpad.dev/，在这个网站中可以在线开发Flutter应用，单击运行按钮能够立刻预览效果。对于Flutter初学者来说，可以在这个网站上边学边练，非常方便。网页的运行效果如图1-18所示。