1.5 创建第一个Flutter应用Hello World
本节介绍如何创建一个Flutter工程，并将它运行起来。
Flutter工程可以通过多种方式进行创建与运行。如在Android Studio中可通过IDE的界面操作，在Visual Studio Code下可通过命令和界面操作，除了GUI工具外，也直接使用flut-ter命令进行操作。本节介绍Android Studio操作方式，其他方式可参考对应的插件和命令文档。
1.5.1 如何创建Flutter工程
打开Android Studio，在欢迎界面中选择Start a new Flutter Project，或者在IDE的主界面中选择File菜单→New选项→New Flutter Project选项，弹出Create New Flutter Project窗口，如图1-19所示。
图1-19 Create New Flutter Project窗口
Flutter工程包含多种类型，分别介绍如下。
• Flutter Application：纯Flutter应用，应用的主体为Flutter实现。在本书的示例中均采用这种类型。
• Flutter Plugin： Flutter插件，将原生能力通过封装后导出给Flutter侧，通常包含An-droid、iOS两端原生代码，以及Dart封装代码。
• Flutter Package：另一种扩展方式，只包含纯Dart代码，不含原生代码。通常为基于Dart标准库的功能扩展，或对Flutter Dart框架的功能扩展。
• Flutter Module： Flutter模块，用于混合开发，指的是在现有Android、iOS应用中集成Flutter能力，实现原生业务与Flutter业务并存。这是目前业界实际业务中最常用的工程形态。
下面以Flutter Application为例，选中它单击Next按钮来到工程名称与路径配置界面，其中需要填写项目名称，设置Flutter SDK路径及项目的存放路径，在Description中可为项目编写一段简短的介绍，具体如图1-20所示。
图1-20 填写项目名称及存放路径
在图1-20中有一个Create project offline选项，默认为未勾选状态，此时创建新工程时会联网拉取最新数据。如果网络不通，会导致IDE卡在这一步，遇到这个问题，可在这一步勾选Create project offline选项，这样创建项目时会跳过联网拉取。
再次单击Next按钮，出现一个新的配置页面，在其中填写包名，包名是应用的唯一标识，需要具备唯一性。之后还有几个勾选项，分别用于选择Android下是否启用androidx、Android下是否启用Kotlin，以及iOS下是否启用Swift。如果读者不知道这些选项的具体含义，采用默认的勾选状态即可。具体如图1-21所示。
单击Finish按钮便开始创建工程，需等待一段时间，之后可看到创建好的工程，工程的入口文件为main.dart，Flutter SDK默认会生成一个简单的计数器代码项目。关于工程结构及代码的含义将在后续小节中进行详细介绍，在本节中重点是先将其运行起来。在IDE中执行flutter pub get，或者打开Terminal在终端中执行这段命令获取依赖。依赖加载完成后，IDE的整体效果如图1-22所示。
图1-21 设置包名等配置
图1-22 hello＿world工程创建成功
1.5.2 配置Android模拟器与真机运行
工程创建完成后，接下来的目标是在不同的设备上将它运行起来。在本节中介绍Android模拟器的运行方式。Android Studio中自带模拟器功能，在开发阶段使用模拟器调试非常方便、好用。
创建模拟器的方法为，在工具栏或者在Tools菜单下单击AVD Manager选项，会弹出如图1-23所示的模拟器创建窗口。
图1-23 模拟器创建窗口
单击Create Virtual Device按钮后会进入机型选择页面，在这个页面中可以选择模拟设备的机型与屏幕大小等。选择Pixel 2设备，单击next按钮。接下来进入系统镜像选择页面，选择ABI为x86的R版本系统。需要说明的是，镜像的ABI分为x86和ARM两种，建议选择x86镜像，x86具备更快的运行速度。再次单击next按钮，进入设备配置确认页，直接单击Finish按钮完成。此时模拟器列表中会出现刚刚添加的模拟器，如图1-24所示。
图1-24 模拟器列表
需要注意的是，运行模拟器需要安装Intel x86 Emulator Accelerator（HAXM installer），这是一个用于提升模拟器运行效率的工具。如果AVD Manager未提示安装，需要手动打开SDK Manager在SDK Tools一栏中进行勾选安装。
单击Actions列的运行按钮，启动虚拟机，会弹出一个运行Android系统的窗口。回到IDE，在工具栏中单击运行按钮运行工程，待编译完成后程序会运行在模拟器中，如图1-25所示。
虽然模拟器非常方便好用，但是在很多场景下无法替代真机，经常需要将应用安装到设备上进行调试。在本节中介绍如何让Flutter应用在Android真机上运行。
首先准备一台Android设备，打开它的开发者选项。不同品牌机型的开发者选项开启方式有所区别，读者可根据自己的机型自行查阅。在手机上进入开发者选项，开启“USB调试”，这样IDE就可以通过adb与手机通信了，如图1-26所示。
图1-25 Android模拟器运行示例工程
图1-26 手机开启USB调试
此时IDE中已经可以看到连接手机的型号，如图1-27所示。再次单击运行按钮，示例工程将会在手机中运行。
图1-27 IDE识别连接设备
1.5.3 配置iOS模拟器与真机运行
Flutter开发iOS应用需要在苹果的macOS环境下进行构建，在macOS下安装XCode，并在XCode中创建虚拟机，具体配置方式可查阅iOS开发环境搭建教程，这里不再赘述。建议安装完XCode环境后，使用flutter doctor命令检查一下是否安装成功。
在macOS下使用Android Studio打开Flutter工程，在设备选择下拉框中选择Open iOS Simulator，这会启动iOS模拟器，如图1-28所示。
待模拟器打开后，会看到设备名称已经切换为模拟器设备。此时单击工具栏上的运行按钮，等待编译完成后示例工程便运行在了模拟器中，如图1-29所示。
图1-28 选择iOS模拟器
图1-29 iOS模拟器运行示例工程
iOS真机运行需要有苹果开发者账号，或者个人Apple ID。但Apple ID只能用于个人开发学习，构建出的应用无法上架AppStore，同时对安装应用的真机数量也有限制。
配置iOS真机运行首先需要在XCode中登录账号，将iOS设备连接到苹果计算机上。来到项目工程所在目录，使用XCode打开ios/Runner.xcworkspace，在左侧的导航区单击根节点Runner进入工程配置，在打开的Tab分页标签中单击Signing&CapabilitiesTab选项，此时需要绑定Apple ID。登录完成后，选中真实设备即可运行。