Mac下安裝Flutter,並建立第一個App

小明愛吃瓜發表於2018-07-07

相關軟體安裝

JDK安裝

  • 下載

前往下載頁面下載安裝包:http://www.oracle.com/technetwork/java/javase/downloads/index.html

下載8.x的版本,8以上的會出問題

  • 安裝

雙擊安裝包,一路下一步至完成

  • 配置

找到jdk安裝路徑,一版情況為:/Library/Java/JavaVirtualMachines/jdk-8.jdk/Contents/Home

也可以開啟訪達,選擇選單【前往】-【電腦】,隨後進入路徑【Macintosh HD】-【資源庫】中看是否存在Java資料夾,然後找尋安裝路徑;

檢查使用者資料夾下是否存在.bash_profile檔案,不存在則建立;

將如下程式碼新增到.bash_profile檔案中

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-10.0.1.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH
複製程式碼

在終端輸入如下命令是配置生效

source ~/.bash_profile
複製程式碼

輸入如下命令檢測是否配置成功,如果成功將輸出配置的路徑

echo $JAVA_HOME
複製程式碼

Android Studio安裝

  • 下載

前往下載頁面下載安裝包:https://developer.android.com/studio/ 或者直接點選下載Android Studio v3.1.3 請在官網下載,避免出現XcodeGhost類似問題

  • 安裝

雙擊安裝包,將應用拖拽到【應用程式】中,完成安裝。

  • 配置

安裝完成後開啟Android Studio應用; 第一次開啟會詢問是否匯入設定,按照需求選擇,我是第一使用,我選擇第二項;

image

第一次使用會彈出無法訪問Android SDK,暫時點Cancel;

image

隨後介面一路藍色按鈕點選即可。

最後一步是下載相關資源,下載結束後即可進入Android Studio了。

在.bash_profile中放入下列程式碼

export ANDROID_HOME=/Users/mingyu/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
複製程式碼

還要安裝外掛,開啟Android Studio,在【首頁】-【Configure】-【Plugins】中所有外掛Flutter和Dart進行安裝;

Xcode安裝

直接在App Store中搜尋Xcode進行安裝

VSCode安裝

開發IDE,直接去官網下載,下載安裝後,需要安裝兩個擴充套件:Dart和Flutter,直接在擴充套件中搜尋安裝即可。

Brew安裝

包管理工具,flutter必須的一些包需要用它來安裝;

前往官方網站,按照上面最新的提示進行安裝; 安裝好後,可以選擇使用國內映象,開啟終端,執行下列命令:

# 參考文件:https://mirror.tuna.tsinghua.edu.cn/help/homebrew/

cd /usr/local/Homebrew

git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git

cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core

git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git

brew update
# update 時間較長,耐心等待
複製程式碼

Flutter安裝

  • 下載

執行下列命令下載最新的flutter程式碼(系統請先安裝Git)

git clone -b beta https://github.com/flutter/flutter.git
複製程式碼
  • 安裝&配置

在使用者資料夾下找到.bash_profile檔案,如果沒有就建立一個;

在檔案中加入如下程式碼:

export PUB_HOSTED_URL=https://pub.flutter-io.cn # 國內使用者需要設定
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # 國內使用者需要設定
export PATH={Fluter程式碼存放目錄}/bin:$PATH
複製程式碼

新增儲存後,執行下列命令重新整理終端:

source $HOME/.bash_profile
複製程式碼

執行下列命令檢查flutter是否已經安裝成功:

flutter -v
複製程式碼

第一次執行會安裝一些東西,然後顯示歡迎提示,告知已經安裝成功;

接下來需要執行下列命令檢查flutter的依賴項:

flutter doctor
複製程式碼

執行該命令後,flutter會提示你那些東西是必須要的,需要執行什麼命令進行安裝,按照提示安裝即可;

其中必要的一項,請創一個虛擬Android虛擬裝置,並保持開機狀態。

第一個Flutter App

開啟VSCode,按F1(有touchbar的機子按住fn可見F1)撥出命令輸入框;

輸入字元Flutter,在命令候選列表中選擇Flutter: New Project,新建一個Flutter專案,隨後讓你填寫專案名稱和選擇專案存放路徑;

專案建立好後,在VSCode右下角選擇除錯環境目標:

image

按F5執行專案;

這裡我遇到了報錯有關於gradle的,解決方案是刪除使用者資料夾下的.gradle資料夾,然後使用brew重新安裝gradle; gradle安裝參考:https://gradle.org/

不報錯的情況下,VSCode會下載一些必要資源,然後在目標裝置(右下角選擇的)上執行app;

image

至此,Flutter安裝完畢,正常執行!接下來就是Flutter開發之旅了~~

相關文章