Flutter beta3 避坑指南1

ZacJi發表於2018-05-24

嘗試寫Flutter也有幾周了, 期間遇到了不少坑, 有的是Flutter尚未完善的需要官方來填, 有的則需要自己來解決, 下面跟大家分享一下自己遇到的幾個問題和相應的解決辦法.

1. 編輯器強烈建議使用Android Studio

VS Code是我個人非常喜愛的程式碼編輯器. 美觀、簡潔、快速. 但是至少目前, 我還是建議你使用谷歌親兒子Android Studio來開發Flutter. VS Code的Flutter外掛已經相當強大, 但Android Studio上的Flutter外掛顯然更加強大, 功能也更為豐富. 最重要的是, 目前的Flutter還不夠穩定(尤其是熱載入).

熱載入失敗 相信你一定很眼熟

當使用VS Code熱載入失效時, 你只能重新編譯執行, 這其中還包括pod更新和Xcode重新編譯, 過程相當緩慢. 但使用Android Studio, 你可以通過點選綠色的箭頭進行“冷載入”.沒有Xcode編譯過程, app甚至都沒有重啟, 你的專案又恢復了正常!

Android Studio

需要注意的是, 如果你安裝並引用了新的第三方庫, 還是需要乖乖重新編譯應用.這個時候不重啟應用雖然能夠跑起來, 但會出現各種問題.

2. 永久更新PATH變數

這件事情應該很早就要做了, 尤其是國內網路不好的緣故, 更需要第一時間使用映象網站. 官網對於.bash_profile的介紹不是很詳細, 我就以Mac為例詳細講解一下.

cd ~                       //進入當前使用者目錄
touch .bash_profile        //新建.bash_profile檔案(如果不存在的話)
open -e .bash_profile      //用記事本開啟.bash_profile檔案
source .bash_profile       //更新剛配置的環境變數
複製程式碼

首先進入使用者主目錄, 新建.bash_profile檔案, 開啟, 新增三句話

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
複製程式碼

前兩句是替換映象網站,第三句是新增PATH變數, PATH_TO_FLUTTER_GIT_DIRECTORY要改為Flutter在本地的路徑, 比如我自己的:

/Users/jihongbo/development/flutter/bin:$PATH

教大家一個好方法, 在目錄上右擊彈出選單, 此時按住option健, 會出現“將XXX拷貝為路徑名稱”, 這時就可以直接貼上用了.

注意: 後面不要加任何符號, 比如//註釋等等. =前後沒有空格(被坑好久)

最後更新一下配置就OK了. 編輯器也要重啟一下一併更新終端配置.

3. 資源管理 pubspec.yaml

pubspec.yaml很像iOS的podfile或者Node.js的package.json, 是專門用來管理第三方庫的. 但同時他也擔負著管理資源(圖片、字型)的任務. 看過教程的我們都知道新增圖片字型只需要在檔案中加入類似下面的程式碼.

fonts:
- family: flyou
  fonts:
    - asset: fonts/fa-solid-900.ttf
複製程式碼

但請注意, 他們的縮排關係一定要正確, 否則會編譯失敗. 猜測pubspec.yaml是根據名稱以及縮排關係來組織字型資訊的, 但這種方式遠不如JSON來的直觀.

4. 對iOS開發不夠友好

最容易上手Flutter的要數Android開發了, 原因很簡單, 都是一個爸爸生的. 從預設的Material Design風格, 到連名字都一毛一樣的控制元件, 連看API的功夫都省了, 閉著眼睛都能猜到想要的控制元件名稱. 其次就是前端開發, 因為Flutter的核心與React以及Vue非常相似, 理解起來得心應手, Dart與ES6又有著極為相似的語法. 而對於iOS開發而言, 需要去啃API文件, 需要去理解資料單向傳遞的概念, 需要去理解swift還沒有釋出的非同步特性...

但是反過來說, 上面提到的這些新的特性都是目前最新最熱的技術, 即便現在不學習, 往後肯定也會需要用到. iOS開發環境相對前端甚至安卓來說都太安逸了, 產生技術爆炸點的頻率相當低. 但我們不能因此拘泥於現有的技術而停滯不前.

所以一起加油吧!

相關文章