1.4　你的第一个Flutter应用

本节将试着创建第一个纯Flutter构建的应用程序，可以同时在Android和iOS两个平台运行。

使用Android Studio进行Flutter项目的创建非常简单。打开Android Studio开发工具，选择Start a new Flutter Project选项，之后会打开模板选择界面，如图1-11所示，选择Flutter Application模板。

图1-11　选择Flutter Application模板

新建的Flutter工程的目录结构如图1-12所示。

图1-12　新建的Flutter工程的目录结构

其中，android文件夹下放置的是Flutter在Android平台运行的相关代码。ios目录中存放的是Flutter在iOS平台运行的相关代码。lib目录是Flutter工程的核心目录，其中存放核心的Dart逻辑代码。在我们创建的模板工程中，默认生成了一个main.drat文件，这个文件是整个应用程序的入口文件。对于这个文件中的内容，你现在不必过多关注。test文件夹用来存放测试代码。除了这些文件夹外，pubspec.yaml文件是工程的配置文件，这个文件用来进行依赖和静态资源的配置。

创建的这个模板工程不需要额外编写任何代码即可直接运行。在Android Studio的工具栏上可以直接选择要运行的模拟器，并单击“运行”按钮运行，如图1-13所示。

图1-13　选择模拟器并运行

如果当前没有正在运行的模拟器，那么可以在选择模拟器的地方直接打开一个Android或iOS模拟器。

单击“运行”按钮运行Flutter工程，第一次运行Flutter工程需要下载和安装一些依赖，这可能需要一些时间。完成后，如果没有异常产生，你就会看到如图1-14和图1-15所示的在模拟器上的效果。

图1-14　在Android模拟器上的运行效果

图1-15　在iOS模拟器上的运行效果

从图1-14和图1-15中可以看到，在Android和iOS平台上，Flutter有着非常一致的表现。在模板工程中，单击右下角的加号按钮，可以实现屏幕上数字的增加。

下面我们进行一些简单的修改，在main.dart中修改静态字符串，之后只要保存文件或者单击工具栏上的热重载按钮，即可实现应用程序的热刷新，如图1-16所示。

图1-16　热重载功能按钮

热重载也是Flutter框架的一大特点，其可以在不重新编译的情况下进行快速重载，省去了开发者每次微小的修改都需要编译运行所消耗的时间。更强大的是，Flutter的热重载不会丢失当前的状态，大大缩减了开发周期。修改静态字符串的内容后，热重载应用程序，效果如图1-17所示。

图1-17　对应用程序进行热重载

现在，你已经与Flutter进行了初次见面，若想更加深入地了解Flutter并且熟练地使用Flutter进行应用程序的开发，就需要学习一个神奇的语言：Dart。