前言

上一篇文章我們搭建好了 Flutter 的開(kāi)發(fā)環(huán)境。
Flutter 即學(xué)即用——01 環(huán)境搭建

這一篇我們通過(guò) Flutter 的一個(gè) Demo 來(lái)了解下 Flutter。

開(kāi)發(fā)系統(tǒng)：MAC
IDE：Android Studio

目錄

1. 創(chuàng)建一個(gè) Flutter 項(xiàng)目

第一步：主界面點(diǎn)擊創(chuàng)建 Flutter 項(xiàng)目

第一步：如果已經(jīng)打開(kāi)項(xiàng)目，則通過(guò) File->New->New Flutter Project... 創(chuàng)建

第二步：默認(rèn)選擇 Flutter Application 即可，點(diǎn)擊 Next

第三步：確定項(xiàng)目名稱，這里默認(rèn)即可，點(diǎn)擊 Next

第四步：修改包名，推薦使用域名倒過(guò)來(lái)，修改好之后點(diǎn)擊 Finish 就創(chuàng)建了

到此項(xiàng)目基本就創(chuàng)建完成了。

2. 運(yùn)行項(xiàng)目

2.1 點(diǎn)擊 IDE 運(yùn)行按鈕運(yùn)行

依次表示 flutter 要安裝的設(shè)備，啟動(dòng)的 flutter 頁(yè)面，以及運(yùn)行按鈕。

點(diǎn)擊運(yùn)行按鈕之后可以看到設(shè)備上面顯示如下界面：

2.2 執(zhí)行 flutter run 命令行運(yùn)行

在 terminal 執(zhí)行 flutter run 即可在對(duì)應(yīng)設(shè)備運(yùn)行 app。
如果有多個(gè)設(shè)備，terminal 會(huì)有提示。

從上面控制臺(tái)的提示信息可以知道：

如果要每個(gè)設(shè)備都安裝，執(zhí)行 flutter run -d all
如果指定設(shè)備安裝，執(zhí)行 flutter run -d deviceId

Example：
如果只安裝到三星手機(jī) SM G9350，執(zhí)行命令

flutter run -d c23b810e

即可。deviceId 就是對(duì)應(yīng)設(shè)備第二列所顯示的字符串。

3. 修改項(xiàng)目體會(huì)熱重載功能

3.1 IDE 運(yùn)行熱重載功能體現(xiàn)

默認(rèn)執(zhí)行的結(jié)果

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

我們將這里面的 Flutter Demo Home Page 改為 My Home Page。
然后按 command+s 進(jìn)行保存。
這時(shí)控制臺(tái)會(huì)自動(dòng)打印熱重載信息。
同時(shí)設(shè)備會(huì)自動(dòng)更新如下：

3.2 命令行運(yùn)行熱重載功能體現(xiàn)

通過(guò) flutter run 運(yùn)行的 flutter 項(xiàng)目?？刂婆_(tái)會(huì)有下面提示：

上面說(shuō)了要熱重載改變按 r 鍵，要熱重啟，按 R 鍵。

接著上面的例子，我們修改 My Home Page 為 Run Page。
保存之后按 r 鍵。

可以看到控制臺(tái)有熱重載信息打印并且界面已經(jīng)更新了。

4. 后記

雖然是重新記錄，但是因?yàn)槭窃谝慌_(tái)新設(shè)備上面操作。而且用的是 mac air，所以遇到各種坑。其中一個(gè)是由于網(wǎng)絡(luò)原因?qū)е旅看芜\(yùn)行都要下載 gradle 版本因此耗時(shí)巨大。比如下圖：

跑一個(gè) Hello World 的 Android 項(xiàng)目要 15 分鐘

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

在同步或者下載 gradle 的時(shí)候，有時(shí)候可能需要等待很久。不建議直接點(diǎn)擊 sync now，因?yàn)?gradle 一般都幾百 M，如果網(wǎng)絡(luò)不好，尤其使用手機(jī)熱點(diǎn)的時(shí)候，會(huì)下載很久，而除了時(shí)間在增多，沒(méi)有其他反饋。但是通過(guò)命令行 ./gradlew clean 或 ./gradlew assemble 可以看到下載 gradle 的時(shí)候會(huì)有一些白色的小圓點(diǎn)表示在下載中，有反饋，交互會(huì)好些。

另外可能另一種方式是直接瀏覽器下載下來(lái)壓縮包，然后放到電腦對(duì)應(yīng)位置。這個(gè)也是可以的。這邊網(wǎng)上也有找了一下，不過(guò)文章位置說(shuō)的是放到目的地，其實(shí)應(yīng)該放在原始位置，讓 IDE 去 unzip 到目的地。至少這邊放到目的地 IDE 還是去重新下載了。而且下載后提示壓縮包錯(cuò)誤，估計(jì)是下載不完全或者其他的，這邊就把之前單獨(dú)下載的壓縮包替換了一下，然后再運(yùn)行就可以了。

這邊的位置是/Users/nesger/.gradle/wrapper/dists/gradle-4.10.2-all/9fahxiiecdb76a5g3aw9oi8rv/，我把壓縮包扔到這個(gè)里面再執(zhí)行 gradlew 命令就可以了。打開(kāi)/Users/nesger/.gradle/wrapper/dists/可以看到各個(gè) gradle 版本。