Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

前言

上一篇文章我们搭建好了 Flutter 的开发环境。
Flutter 即学即用——01 环境搭建

这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter。

开发系统：MAC
IDE：Android Studio

目录

1. 创建一个 Flutter 项目

到此项目基本就创建完成了。

2. 运行项目 2.1 点击 IDE 运行按钮运行

依次表示 flutter 要安装的设备，启动的 flutter 页面，以及运行按钮。

点击运行按钮之后可以看到设备上面显示如下界面：

2.2 执行 flutter run 命令行运行

在 terminal 执行 flutter run 即可在对应设备运行 app。
如果有多个设备，terminal 会有提示。

从上面控制台的提示信息可以知道：

如果要每个设备都安装，执行 flutter run -d all
如果指定设备安装，执行 flutter run -d deviceId

Example：
如果只安装到三星手机 SM G9350，执行命令

flutter run -d c23b810e

即可。deviceId 就是对应设备第二列所显示的字符串。

3. 修改项目体会热重载功能 3.1 IDE 运行热重载功能体现

默认执行的结果

我们可以看到文件 main.dart 里面有如下代码

我们将这里面的 Flutter Demo Home Page 改为 My Home Page。
然后按 command+s 进行保存。
这时控制台会自动打印热重载信息。
同时设备会自动更新如下：

3.2 命令行运行热重载功能体现

通过 flutter run 运行的 flutter 项目。控制台会有下面提示：

上面说了要热重载改变按 r 键，要热重启，按 R 键。

接着上面的例子，我们修改 My Home Page 为 Run Page。
保存之后按 r 键。

可以看到控制台有热重载信息打印并且界面已经更新了。

4. 后记

虽然是重新记录，但是因为是在一台新设备上面操作。而且用的是 mac air，所以遇到各种坑。其中一个是由于网络原因导致每次运行都要下载 gradle 版本因此耗时巨大。比如下图：

跑一个 Hello World 的 Android 项目要 15 分钟

后面修改为本地 gradle。就好多了。