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

前言

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

这一篇咱们经过 Flutter 的一个 Demo 来了解下 Flutter。

开发系统：MAC
IDE：Android Studio

目录

1. 建立一个 Flutter 项目

第一步：主界面点击建立 Flutter 项目

第一步：若是已经打开项目，则经过 File->New->New Flutter Project... 建立

第二步：默认选择 Flutter Application 便可，点击 Next

第三步：肯定项目名称，这里默认便可，点击 Next

第四步：修改包名，推荐使用域名倒过来，修改好以后点击 Finish 就建立了

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

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。就好多了。

在同步或者下载 gradle 的时候，有时候可能须要等待好久。不建议直接点击 sync now，由于 gradle 通常都几百 M，若是网络很差，尤为使用手机热点的时候，会下载好久，而除了时间在增多，没有其余反馈。可是经过命令行 ./gradlew clean 或 ./gradlew assemble 能够看到下载 gradle 的时候会有一些白色的小圆点表示在下载中，有反馈，交互会好些。

另外可能另外一种方式是直接浏览器下载下来压缩包，而后放到电脑对应位置。这个也是能够的。这边网上也有找了一下，不过文章位置说的是放到目的地，其实应该放在原始位置，让 IDE 去 unzip 到目的地。至少这边放到目的地 IDE 仍是去从新下载了。并且下载后提示压缩包错误，估计是下载不彻底或者其余的，这边就把以前单独下载的压缩包替换了一下，而后再运行就能够了。

这边的位置是/Users/nesger/.gradle/wrapper/dists/gradle-4.10.2-all/9fahxiiecdb76a5g3aw9oi8rv/，我把压缩包扔到这个里面再执行 gradlew 命令就能够了。打开/Users/nesger/.gradle/wrapper/dists/能够看到各个 gradle 版本。