Flutter 即學即用系列博客——02 一個純 Flutter Demo 說明


前言

上一篇文章我們搭建好了 Flutter 的開發環境。
Flutter 即學即用——01 環境搭建

這一篇我們通過 Flutter 的一個 Demo 來了解下 Flutter。

開發系統:MAC
IDE:Android Studio

目錄

1. 創建一個 Flutter 項目

第一步:主界面點擊創建 Flutter 項目
第一步:主界面點擊創建 Flutter 項目
第一步:如果已經打開項目,則通過 File->New->New Flutter Project... 創建
第一步:如果已經打開項目,則通過 File->New->New Flutter Project... 創建
第二步:默認選擇 Flutter Application 即可,點擊 Next
第二步:默認選擇 Flutter Application 即可,點擊 Next
第三步:確定項目名稱,這里默認即可,點擊 Next
第三步:確定項目名稱,這里默認即可,點擊 Next
第四步:修改包名,推薦使用域名倒過來,修改好之后點擊 Finish 就創建了
第四步:修改包名,推薦使用域名倒過來,修改好之后點擊 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 版本。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM