Flutter環境建置(Mac)

公司主管熊熊說了一句「大家來研究flutter吧!」,開啟了我從零開始研究flutter安裝環境到撰寫Dart的奇幻旅程…

安裝flutter前,有一些事必須完成:

安裝Xcode

現在最新版的Xcode11必須要在os系統10.14.3以上版本(可以從App Store搜尋Xcode看到)
macOS 10.14.nmacOS 10.13.n是不同主題,所以要更新的話,要從官網下載安裝,才會真的更新到macOS 10.14.n版本。
如果不知道自己的電腦現在是什麼版本,點左上角的蘋果圖示,選「關於這台Mac」,裡面就會顯示了!

從官網找到下載macOS Mojave

按照步驟下載、安裝、重開機…都完成後就可以下載Xcode

在App Store搜尋Xcode,並且下載

安裝Android Studio

依照Flutter官網步驟安裝,這邊沒遇到什麼問題~
下載並安裝Android Studio

下載之後打開檔案,把app移動到應用程式中。

接下來就是最主要的工程。


安裝Flutter

1.進入Flutter官網,點選那個下載zip的藍色按鈕。

2. 解壓縮檔案:

(1) 進入你要放這個SDK的資料夾

$ cd ${專案資料夾路徑}

這邊我自己的路徑是,我有一個playground資料夾,裡面放一堆我自己的開發資料,然後我創建了一個資料夾叫做flutter_sdk用來放我的flutter工具,所以我進入的路徑就是:

$ cd /Users/jessica/playground/flutter_sdk

進入之後,把剛剛下載的檔案搬到這個路徑下解壓縮:

$ unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip

(2) 當然你也可以手動從下載資料夾把壓縮黨移到路徑下,手動解壓縮

手動搬移檔案,點兩下解壓縮

3. 輸入以下指令添加Flutter工具到你的專案資料夾

$ export PATH="$PATH:${你的專案路徑}/flutter/bin"

在這邊我就是輸入我的專案路徑

$ export PATH="$PATH:/Users/jessica/playground/flutter_sdk/flutter/bin"

執行這個指令,如果終端機什麼字都沒顯示,表示你路徑key錯了
如果要永久的修改$PATH路徑,就要進入/Users/jessica/.zshrc裡面去改

export PATH=$PATH:/Users/jessica/playground/flutter_sdk/flutter/bin

4. 檢查看看是否已正確設置所有內容

$ flutter doctor 

執行完這個指令,可能會出現以下很多錯誤訊息,是因為我們安裝完Xcode或是Android Studio後,沒有進行設定,所以他找不到SDK檔案~

每一項錯誤,他都會解釋如何解決,每解決一項,就可以再執行一次$ flutter doctor ,檢查看看錯誤有沒有減少~


如果終端機出現以下訊息

invalid active developer path ...

請回到下這段指令安裝Xcode command line

$ xcode-select --install

完成後,再跑一次$ flutter doctor


之後每次要起專案的話:

1.先開啟模擬器

$ open -a Simulator

2. 啟動專案

$ cd {project_name}
$ flutter run

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。