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 版本。